<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>File and Directory Entries API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/entries-api/" rel="canonical">
  <link href="logo-folder.png" rel="icon">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">File and Directory Entries API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/entries-api/">https://wicg.github.io/entries-api/</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/entries-api">https://github.com/web-platform-tests/wpt/tree/master/entries-api</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:jsbell@google.com">Joshua Bell</a> (<a class="p-org org" href="https://google.com">Google Inc.</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the File and Directory Entries API Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification documents web browser support for file

    and directory upload by drag-and-drop operations. It introduces
    types representing directories with methods for asynchronous
    traversal, and extends <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement" id="ref-for-htmlinputelement">HTMLInputElement</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem" id="ref-for-datatransferitem">DataTransferItem</a></code> <a data-link-type="biblio" href="#biblio-html">[HTML]</a>.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#goals"><span class="secno">1</span> <span class="content">Goals</span></a>
    <li>
     <a href="#concepts"><span class="secno">2</span> <span class="content">Concepts</span></a>
     <ol class="toc">
      <li><a href="#names-paths"><span class="secno">2.1</span> <span class="content">Names and Paths</span></a>
      <li><a href="#files-dirs"><span class="secno">2.2</span> <span class="content">Files and Directories</span></a>
      <li><a href="#entries"><span class="secno">2.3</span> <span class="content">Entries</span></a>
      <li><a href="#dir-reader"><span class="secno">2.4</span> <span class="content">Directory Reader</span></a>
     </ol>
    <li><a href="#algorithms"><span class="secno">3</span> <span class="content">Algorithms</span></a>
    <li><a href="#file-interface"><span class="secno">4</span> <span class="content">The <code class="idl"><span>File</span></code> Interface</span></a>
    <li><a href="#html-forms"><span class="secno">5</span> <span class="content">HTML: Forms</span></a>
    <li><a href="#html-data"><span class="secno">6</span> <span class="content">HTML: Drag and drop</span></a>
    <li>
     <a href="#api-files-directories"><span class="secno">7</span> <span class="content">Files and Directories</span></a>
     <ol class="toc">
      <li><a href="#api-entry"><span class="secno">7.1</span> <span class="content">The <code class="idl"><span>FileSystemEntry</span></code> Interface</span></a>
      <li><a href="#api-directoryentry"><span class="secno">7.2</span> <span class="content">The <code class="idl"><span>FileSystemDirectoryEntry</span></code> Interface</span></a>
      <li><a href="#api-directoryreader"><span class="secno">7.3</span> <span class="content">The <code class="idl"><span>FileSystemDirectoryReader</span></code> Interface</span></a>
      <li><a href="#api-fileentry"><span class="secno">7.4</span> <span class="content">The <code class="idl"><span>FileSystemFileEntry</span></code> Interface</span></a>
      <li><a href="#api-domfilesystem"><span class="secno">7.5</span> <span class="content">The <code class="idl"><span>FileSystem</span></code> Interface</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">8</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <p><img alt="logo" src="logo-folder.svg" style="height: 100px; width: 100px; position: absolute; right: 20px; top: 30px;"></p>
   <h2 class="heading settled" data-level="1" id="goals"><span class="secno">1. </span><span class="content">Goals</span><a class="self-link" href="#goals"></a></h2>
   <p>This specification documents the types and operations made available
by web browsers to script when a hierarchy of files and directories
are dragged and dropped onto a page or selected using form elements,
or equivalent user actions.</p>
   <p>This is heavily based upon earlier drafts of <a data-link-type="biblio" href="#biblio-file-system-api">[file-system-api]</a> which
defines similar types in the context of a sandboxed file system,
including operations for creating and modifying files and directories,
but which has not been broadly adopted by web browsers.</p>
   <aside class="note"> The APIs described by this document was initially implemented in
  Google Chrome. Other browsers (at this time: Edge, Firefox and
  Safari) are starting to support subsets of Chrome’s APIs
  and behavior. The intent of this document is to specify the common
  subset to ensure that the implementations are interoperable. </aside>
   <h2 class="heading settled" data-level="2" id="concepts"><span class="secno">2. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="names-paths"><span class="secno">2.1. </span><span class="content">Names and Paths</span><a class="self-link" href="#names-paths"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="name">name</dfn> is a string which:</p>
   <ul>
    <li data-md>
     <p>does not contain '/' (U+002F SOLIDUS)</p>
    <li data-md>
     <p>does not contain NUL (U+0000)</p>
    <li data-md>
     <p>does not contain '\' (U+005C REVERSE SOLIDUS)</p>
    <li data-md>
     <p>is not '.' (U+002E FULL STOP)</p>
    <li data-md>
     <p>is not '..' (U+002E FULL STOP, U+002E FULL STOP)</p>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="path-segment">path segment</dfn> is a <a data-link-type="dfn" href="#name" id="ref-for-name">name</a>, '.' (U+002E FULL STOP) or
'..' (U+002E FULL STOP, U+002E FULL STOP).</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="relative-path">relative path</dfn> is a string consisting of one or more <a data-link-type="dfn" href="#path-segment" id="ref-for-path-segment">path segments</a> joined by '/' (U+002F SOLIDUS) that does not start
with '/' (U+002F SOLIDUS).</p>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="absolute-path">absolute path</dfn> is a string consisting of '/' (U+002F
SOLIDUS) followed by zero or more <a data-link-type="dfn" href="#path-segment" id="ref-for-path-segment①">path segments</a> joined by '/'
(U+002F SOLIDUS).</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="path">path</dfn> is either a <a data-link-type="dfn" href="#relative-path" id="ref-for-relative-path">relative path</a> or an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path">absolute
path</a>.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="valid-path">valid path</dfn> is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString">USVString</a></code> which is a <a data-link-type="dfn" href="#path" id="ref-for-path">path</a>.</p>
   <h3 class="heading settled" data-level="2.2" id="files-dirs"><span class="secno">2.2. </span><span class="content">Files and Directories</span><a class="self-link" href="#files-dirs"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="file">file</dfn> consists of binary data and a <dfn class="dfn-paneled" data-dfn-for="file" data-dfn-type="dfn" data-noexport id="file-name">name</dfn> (a non-empty <a data-link-type="dfn" href="#name" id="ref-for-name①">name</a>).</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directory">directory</dfn> consists of a <dfn class="dfn-paneled" data-dfn-for="directory" data-dfn-type="dfn" data-noexport id="directory-name">name</dfn> (a <a data-link-type="dfn" href="#name" id="ref-for-name②">name</a>) and an ordered list of members. Each member is either a <a data-link-type="dfn" href="#file" id="ref-for-file">file</a> or a <a data-link-type="dfn" href="#directory" id="ref-for-directory">directory</a>. Each member of a <a data-link-type="dfn" href="#directory" id="ref-for-directory①">directory</a> must have
a distinct non-empty <a data-link-type="dfn" href="#name" id="ref-for-name③">name</a>.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="root-directory">root directory</dfn> is a <a data-link-type="dfn" href="#directory" id="ref-for-directory②">directory</a> that is not a member of
a <a data-link-type="dfn" href="#directory" id="ref-for-directory③">directory</a>. A <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory">root directory</a>'s <a data-link-type="dfn" href="#name" id="ref-for-name④">name</a> is empty.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parent">parent</dfn> of a <a data-link-type="dfn" href="#file" id="ref-for-file①">file</a> or <a data-link-type="dfn" href="#directory" id="ref-for-directory④">directory</a> is the <a data-link-type="dfn" href="#directory" id="ref-for-directory⑤">directory</a> it is a member of. A <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory①">root directory</a> has no <a data-link-type="dfn" href="#parent" id="ref-for-parent">parent</a>.</p>
   <aside class="issue" id="issue-44290766"><a class="self-link" href="#issue-44290766"></a> EDITORIAL:
  Should <a data-link-type="dfn" href="#directory" id="ref-for-directory⑥">directory</a> be defined as a special type of <a data-link-type="dfn" href="#file" id="ref-for-file②">file</a> so that minimal changes are necessary in <a data-link-type="biblio" href="#biblio-html">[HTML]</a>? </aside>
   <aside class="note"> In most cases, the files and directories selected by the user will
  be presented by the API as if contained by a <em>virtual root</em> that does not exist as an entity in the actual native file system
  backing the interaction with the API. </aside>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="file-system">file system</dfn> consists of a <dfn class="dfn-paneled" data-dfn-for="file system" data-dfn-type="dfn" data-noexport id="file-system-name">name</dfn> and a <dfn class="dfn-paneled" data-dfn-for="file system" data-dfn-type="dfn" data-noexport id="file-system-root">root</dfn> which is an associated <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory②">root
directory</a>. The <a data-link-type="dfn" href="#file-system-name" id="ref-for-file-system-name">name</a> of a <a data-link-type="dfn" href="#file-system" id="ref-for-file-system">file system</a> is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①">USVString</a></code> which is implementation defined but is unique to the <a data-link-type="dfn" href="#file-system" id="ref-for-file-system①">file system</a>. A <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory③">root directory</a> is associated with exactly one <a data-link-type="dfn" href="#file-system" id="ref-for-file-system②">file system</a>.</p>
   <aside class="note"> Implementations could produce a <a data-link-type="dfn" href="#file-system-name" id="ref-for-file-system-name①">name</a> by generating a
  UUID for each <a data-link-type="dfn" href="#file-system" id="ref-for-file-system③">file system</a> instance with some fixed prefix and
  suffix strings applied. Authors using the API are adviised not to make
  assumptions about the structure or content of the names. </aside>
   <h3 class="heading settled" data-level="2.3" id="entries"><span class="secno">2.3. </span><span class="content">Entries</span><a class="self-link" href="#entries"></a></h3>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="entry-concept">entry</dfn> is either a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="file-entry">file entry</dfn> or a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directory-entry">directory entry</dfn>.</p>
   <p>An <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept">entry</a> has an <dfn class="dfn-paneled" data-dfn-for="entry" data-dfn-type="dfn" data-noexport id="entry-name">name</dfn> (a <a data-link-type="dfn" href="#name" id="ref-for-name⑤">name</a>) and a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="full-path">full path</dfn> (an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path①">absolute path</a>).</p>
   <p>An <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①">entry</a> also has a <dfn class="dfn-paneled" data-dfn-for="entry" data-dfn-type="dfn" data-noexport id="entry-root">root</dfn>, which is an
associated <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory④">root directory</a>.</p>
   <aside class="note"> <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept②">Entries</a> are defined in terms of <a data-link-type="dfn" href="#path" id="ref-for-path①">paths</a> relative to a <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory⑤">root
  directory</a> to account for the fact that a native file system
  backing the interaction with the API could be modified asynchronously
  during operations such as enumerating the contents of a directory.
  Operations exposed on <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept③">entries</a> will produce errors in such cases
  where the <a data-link-type="dfn" href="#path" id="ref-for-path②">paths</a> no longer reference the same entity. </aside>
   <p>The <dfn class="dfn-paneled" data-dfn-for="entry" data-dfn-type="dfn" data-noexport id="entry-file-system">file system</dfn> of an <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept④">entry</a> is the <a data-link-type="dfn" href="#file-system" id="ref-for-file-system④">file system</a> associated with the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept⑤">entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root">root</a>.</p>
   <h3 class="heading settled" data-level="2.4" id="dir-reader"><span class="secno">2.4. </span><span class="content">Directory Reader</span><a class="self-link" href="#dir-reader"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="directory-reader">directory reader</dfn> consists of an associated <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry">directory
entry</a>, an associated <a data-link-type="dfn" href="#directory" id="ref-for-directory⑦">directory</a> (initially null), a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="reading flag" data-noexport id="reading-flag">reading
flag</dfn> (initially unset), a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="done-flag">done flag</dfn> (initially
unset), and a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="reader-error">reader error</dfn> (initially null).</p>
   <h2 class="heading settled" data-level="3" id="algorithms"><span class="secno">3. </span><span class="content">Algorithms</span><a class="self-link" href="#algorithms"></a></h2>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="resolve-a-relative-path">resolve a relative path</dfn> with <var>abspath</var> (an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path②">absolute
path</a>) and <var>path</var> (an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path③">absolute path</a>, a <a data-link-type="dfn" href="#relative-path" id="ref-for-relative-path①">relative path</a>, or the empty string), run
the following steps which return an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path④">absolute path</a>:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p>If <var>path</var> is an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path⑤">absolute path</a>, return <var>path</var>.</p>
     <li data-md>
      <p>Let <var>abspath segments</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#strictly-split" id="ref-for-strictly-split">strictly splitting</a> <var>abspath</var> on '/' (U+002F SOLIDUS).</p>
      <aside class="note">The first string will be empty.</aside>
     <li data-md>
      <p>Let <var>path segments</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#strictly-split" id="ref-for-strictly-split①">strictly splitting</a> <var>path</var> on '/' (U+002F SOLIDUS).</p>
     <li data-md>
      <p>For each <var>segment</var> in <var>path segments</var>, switch on <var>segment</var>:</p>
      <dl class="switch">
       <dt>empty string 
       <dd>Continue. 
       <dt>'.' (U+002E FULL STOP) 
       <dd>Continue. 
       <dt>'..' (U+002E FULL STOP, U+002E FULL STOP) 
       <dd>Remove the last member of <var>abspath segments</var> unless it is the only member. 
       <dt>Otherwise 
       <dd>Append <var>segment</var> to <var>abspath segments</var>. 
      </dl>
    </ol>
    <ol start="5">
     <li data-md>
      <p>Return <var>abspath segments</var> joined by '/' (U+002F SOLIDUS).</p>
    </ol>
   </div>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="evaluate-a-path">evaluate a path</dfn> with <var>directory</var> (an <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory⑥">root directory</a>)
and <var>path</var> (an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path⑥">absolute path</a>), run the following steps which
return a <a data-link-type="dfn" href="#file" id="ref-for-file③">file</a>, <a data-link-type="dfn" href="#directory" id="ref-for-directory⑧">directory</a>, or <em>failure</em>.</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p>Let <var>segments</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#strictly-split" id="ref-for-strictly-split②">strictly splitting</a> <var>path</var> on
'/' (U+002F SOLIDUS).</p>
     <li data-md>
      <p>Remove the first entry from <var>segments</var>.</p>
      <aside class="note">Since <var>path</var> was an <a data-link-type="dfn" href="#absolute-path" id="ref-for-absolute-path⑦">absolute path</a>,
  this first entry will always be empty.</aside>
     <li data-md>
      <p>For each <var>segment</var> in <var>segments</var>, switch on <var>segment</var>:</p>
      <dl class="switch">
       <dt>empty string 
       <dd>Continue. 
       <dt>'.' (U+002E FULL STOP) 
       <dd>Continue. 
       <dt>'..' (U+002E FULL STOP, U+002E FULL STOP) 
       <dd>Let <var>directory</var> be <var>directory</var>’s <a data-link-type="dfn" href="#parent" id="ref-for-parent①">parent</a>,
      or <var>directory</var> if none. 
       <dt>Otherwise 
       <dd>
         Run these substeps: 
        <ol>
         <li data-md>
          <p>Let <var>item</var> be the member of <var>directory</var> with <a data-link-type="dfn" href="#name" id="ref-for-name⑥">name</a> equal to <var>segment</var>, or return <em>failure</em> if none.</p>
         <li data-md>
          <p>If <var>segment</var> is the last item in <var>segments</var>, return <var>item</var>.</p>
         <li data-md>
          <p>If <var>item</var> is a <a data-link-type="dfn" href="#file" id="ref-for-file④">file</a>, return <em>failure</em>.</p>
         <li data-md>
          <p>Let <var>directory</var> be <var>item</var>.</p>
        </ol>
      </dl>
    </ol>
   </div>
   <h2 class="heading settled" data-level="4" id="file-interface"><span class="secno">4. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file">File</a></code> Interface</span><a class="self-link" href="#file-interface"></a></h2>
   <aside class="issue" id="issue-c8b14ee1"><a class="self-link" href="#issue-c8b14ee1"></a> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-fileapi">[FileAPI]</a> once it is complete. </aside>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file①"><c- g>File</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString②"><c- b>USVString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="File" data-dfn-type="attribute" data-export data-readonly data-type="USVString" id="dom-file-webkitrelativepath"><code><c- g>webkitRelativePath</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath">webkitRelativePath</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file②">File</a></code> interface
must return the <a data-link-type="dfn" href="#relative-path" id="ref-for-relative-path②">relative path</a> of the file, or the empty string if
not specified.</p>
   <h2 class="heading settled" data-level="5" id="html-forms"><span class="secno">5. </span><span class="content">HTML: Forms</span><a class="self-link" href="#html-forms"></a></h2>
   <aside class="issue" id="issue-21f071e0"><a class="self-link" href="#issue-21f071e0"></a> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-html">[HTML]</a> once it is complete.
  Sections such as the steps to <em>construct the form data set</em> need to be extended to include the <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath①">webkitRelativePath</a></code> property. </aside>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement" id="ref-for-htmlinputelement①"><c- g>HTMLInputElement</c-></a> {
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLInputElement" data-dfn-type="attribute" data-export data-type="boolean" id="dom-htmlinputelement-webkitdirectory"><code><c- g>webkitdirectory</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry"><c- n>FileSystemEntry</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLInputElement" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<FileSystemEntry>" id="dom-htmlinputelement-webkitentries"><code><c- g>webkitEntries</c-></code></dfn>;
};
</pre>
   <p>When an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element">input</a></code> element’s <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type" id="ref-for-attr-input-type">type</a></code> attribute is in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/forms.html#file-upload-state-(type=file)" id="ref-for-file-upload-state-(type=file)">File
Upload</a> state, the rules in this section apply.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitdirectory" id="ref-for-dom-htmlinputelement-webkitdirectory">webkitdirectory</a></code> attribute is a boolean
attribute that indicates whether the user is to be allowed to select a
directory rather than a file or files. When specified, the behavior on
the selection of a directory is as if all files with that directory as
an ancestor were selected. In addition, the <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath②">webkitRelativePath</a></code> property of each <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file③">File</a></code> is set to a <a data-link-type="dfn" href="#relative-path" id="ref-for-relative-path③">relative path</a> starting from (and including) the selected directory
to the file.</p>
   <aside class="example" id="example-550348cb">
    <a class="self-link" href="#example-550348cb"></a> Given the following directory structure: 
<pre>documents/
  to_upload/
    a/
      b/
        1.txt
        2.txt
      3.txt
  not_uploaded.txt
</pre>
    <p>If the <code>to_upload</code> directory was selected, then <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#dom-input-files" id="ref-for-dom-input-files">files</a></code> would include:</p>
    <ul>
     <li data-md>
      <p>An entry with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-name" id="ref-for-dfn-name">name</a></code> == "<code>1.txt</code>" and <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath③">webkitRelativePath</a></code> == "<code>to_upload/a/b/1.txt</code>"</p>
     <li data-md>
      <p>An entry with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-name" id="ref-for-dfn-name①">name</a></code> == "<code>2.txt</code>" and <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath④">webkitRelativePath</a></code> == "<code>to_upload/a/b/2.txt</code>"</p>
     <li data-md>
      <p>An entry with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-name" id="ref-for-dfn-name②">name</a></code> == "<code>3.txt</code>" and <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath⑤">webkitRelativePath</a></code> == "<code>to_upload/a/3.txt</code>"</p>
    </ul>
   </aside>
   <aside class="note"> A user agent could represent any hierarchical data as directories
  during a selection operation. For example, on a device that does not
  expose a native file system directly to the user, photo albums could
  be presented as directories if <code>"image/*"</code> is specified
  for the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#dom-input-accept" id="ref-for-dom-input-accept">accept</a></code> attribute. </aside>
   <aside class="example" id="example-d964aaf3">
    <a class="self-link" href="#example-d964aaf3"></a> Inspecting the <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath⑥">webkitRelativePath</a></code> properties after a
directory is selected with an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element①">input</a></code> element: 
<pre class="language-html highlight">  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>b</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>webkitdirectory</c-><c- p>></c->
</pre>
<pre class="language-js highlight">  document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#b'</c-><c- p>).</c->addEventListener<c- p>(</c-><c- t>'change'</c-><c- p>,</c-> e <c- p>=></c-> <c- p>{</c->
    <c- k>for</c-> <c- p>(</c->file entry <c- k>of</c-> e<c- p>.</c->target<c- p>.</c->files<c- p>)</c->
      console<c- p>.</c->log<c- p>(</c->file<c- p>.</c->name<c- p>,</c-> file<c- p>.</c->webkitRelativePath<c- p>);</c->
  <c- p>});</c->
</pre>
   </aside>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries" id="ref-for-dom-htmlinputelement-webkitentries">webkitEntries</a></code> IDL attribute allows scripts to
access the element’s selected entries. On getting, if the IDL
attribute applies, it must return an array of <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry①">FileSystemEntry</a></code> objects that represent the current <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-type-file-selected" id="ref-for-concept-input-type-file-selected">selected files</a> (including
directories, if permitted). If the IDL attribute does not apply, then
it must instead return null.</p>
   <aside class="example" id="example-e5cc7383">
    <a class="self-link" href="#example-e5cc7383"></a> Enumerating entries using <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries" id="ref-for-dom-htmlinputelement-webkitentries①">webkitEntries</a></code>: 
<pre class="language-html highlight">  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>multiple</c-><c- p>></c->
</pre>
<pre class="language-js highlight">  document<c- p>.</c->querySelector<c- p>(</c-><c- t>'#a'</c-><c- p>).</c->addEventListener<c- p>(</c-><c- t>'change'</c-><c- p>,</c-> e <c- p>=></c-> <c- p>{</c->
    <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> entry <c- k>of</c-> e<c- p>.</c->target<c- p>.</c->webkitEntries<c- p>)</c->
      handleEntry<c- p>(</c->entry<c- p>);</c->
  <c- p>});</c->
</pre>
   </aside>
   <aside class="issue" id="issue-4cc238bb"><a class="self-link" href="#issue-4cc238bb"></a> INTEROP:
  In Chrome, <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries" id="ref-for-dom-htmlinputelement-webkitentries②">webkitEntries</a></code> is only populated as
  the result of a drag-and-drop operation, not when the element is
  clicked. Should we fix this so it is always populated? </aside>
   <aside class="issue" id="issue-452f97f6"><a class="self-link" href="#issue-452f97f6"></a> INTEROP:
  In Chrome, if <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitdirectory" id="ref-for-dom-htmlinputelement-webkitdirectory①">webkitdirectory</a></code> is specified on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement" id="ref-for-htmlinputelement②">HTMLInputElement</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries" id="ref-for-dom-htmlinputelement-webkitentries③">webkitEntries</a></code> is not
  populated; the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#dom-input-files" id="ref-for-dom-input-files①">files</a></code> collection and <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath" id="ref-for-dom-file-webkitrelativepath⑦">webkitRelativePath</a></code> properties must be used instead to
  reconstruct the directory structure. Should we fix this so it is
  always populated? </aside>
   <h2 class="heading settled" data-level="6" id="html-data"><span class="secno">6. </span><span class="content">HTML: Drag and drop</span><a class="self-link" href="#html-data"></a></h2>
   <aside class="issue" id="issue-0615e37a"><a class="self-link" href="#issue-0615e37a"></a> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-html">[HTML]</a> once it is complete. </aside>
   <p>During a <em>drag-and-drop operation</em>, <a data-link-type="dfn" href="#file" id="ref-for-file⑤">file</a> and <a data-link-type="dfn" href="#directory" id="ref-for-directory⑨">directory</a> items are associated with <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept⑥">entries</a>. Each <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept⑦">entry</a> is a member of a <a data-link-type="dfn" href="#root-directory" id="ref-for-root-directory⑦">root directory</a> unique to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store" id="ref-for-drag-data-store">drag data store</a>.</p>
   <p>Additionally, each <a data-link-type="dfn" href="#directory" id="ref-for-directory①⓪">directory</a> item is represented in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store-item-list" id="ref-for-drag-data-store-item-list">drag
data store item list</a> as a <i>File</i>. If it is accessed via <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-getasfile" id="ref-for-dom-datatransferitem-getasfile">getAsFile()</a></code> a zero-length <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file④">File</a></code> is returned.</p>
   <aside class="note"> A user agent could represent any hierarchical data as files and
  directories during a drag-and-drop operation. For example, audio
  data stored in a relational database with separate tables for albums
  metadata and blobs for tracks could be exposed to script as
  directories and files when dragged from a media player application. </aside>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem" id="ref-for-datatransferitem①"><c- g>DataTransferItem</c-></a> {
    <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry②"><c- n>FileSystemEntry</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="DataTransferItem" data-dfn-type="method" data-export data-lt="webkitGetAsEntry()" id="dom-datatransferitem-webkitgetasentry"><code><c- g>webkitGetAsEntry</c-></code></dfn>();
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-datatransferitem-webkitgetasentry" id="ref-for-dom-datatransferitem-webkitgetasentry">webkitGetAsEntry()</a></code> method must run the
following steps when invoked:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p>If the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem" id="ref-for-datatransferitem②">DataTransferItem</a></code> object is not in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-rw" id="ref-for-concept-dnd-rw">read/write
mode</a> or the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-ro" id="ref-for-concept-dnd-ro">read-only mode</a>, return null and abort these
steps.</p>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-item-kind" id="ref-for-the-drag-data-item-kind">drag data item kind</a> is not <em>File</em>, then return
null and abort these steps.</p>
     <li data-md>
      <p>Return a new <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry③">FileSystemEntry</a></code> object representing the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept⑧">entry</a>.</p>
    </ol>
   </div>
   <aside class="example" id="example-9994479b">
    <a class="self-link" href="#example-9994479b"></a> Handling drag and drop of files and directories: 
<pre class="language-js highlight">elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'dragover'</c-><c- p>,</c-> e <c- p>=></c-> <c- p>{</c->
  <c- c1>// Prevent navigation.</c->
  e<c- p>.</c->preventDefault<c- p>();</c->
<c- p>});</c->
elem<c- p>.</c->addEventListener<c- p>(</c-><c- t>'drop'</c-><c- p>,</c-> e <c- p>=></c-> <c- p>{</c->
  <c- c1>// Prevent navigation.</c->
  e<c- p>.</c->preventDefault<c- p>();</c->

  <c- c1>// Process all of the items.</c->
  <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> item <c- k>of</c-> e<c- p>.</c->dataTransfer<c- p>.</c->items<c- p>)</c-> <c- p>{</c->
    <c- c1>// kind will be 'file' for file/directory entries.</c->
    <c- k>if</c-> <c- p>(</c->item<c- p>.</c->kind <c- o>===</c-> <c- t>'file'</c-><c- p>)</c-> <c- p>{</c->
      <c- kr>const</c-> entry <c- o>=</c-> item<c- p>.</c->webkitGetAsEntry<c- p>();</c->
      handleEntry<c- p>(</c->entry<c- p>);</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </aside>
   <h2 class="heading settled" data-level="7" id="api-files-directories"><span class="secno">7. </span><span class="content">Files and Directories</span><a class="self-link" href="#api-files-directories"></a></h2>
   <aside class="issue" id="issue-b91b245d"><a class="self-link" href="#issue-b91b245d"></a> WEB COMPAT:
  The legacy <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror">TypeMismatchError</a></code> has been replaced in most
  specifications by <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror">TypeError</a></code>, but the name differs. Is it
  compatible to switch here as well? </aside>
<pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-errorcallback"><code><c- g>ErrorCallback</c-></code></dfn> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException"><c- n>DOMException</c-></a> <dfn class="idl-code" data-dfn-for="ErrorCallback" data-dfn-type="argument" data-export id="dom-errorcallback-err"><code><c- g>err</c-></code><a class="self-link" href="#dom-errorcallback-err"></a></dfn>);
</pre>
   <p>An <code class="idl"><a data-link-type="idl" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback">ErrorCallback</a></code> function is used for operations that may return an
error asynchronously.</p>
   <h3 class="heading settled" data-level="7.1" id="api-entry"><span class="secno">7.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry④">FileSystemEntry</a></code> Interface</span><a class="self-link" href="#api-entry"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="filesystementry"><code><c- g>FileSystemEntry</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-filesystementry-isfile"><code><c- g>isFile</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-filesystementry-isdirectory"><code><c- g>isDirectory</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString③"><c- b>USVString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="attribute" data-export data-readonly data-type="USVString" id="dom-filesystementry-name"><code><c- g>name</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString④"><c- b>USVString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="attribute" data-export data-readonly data-type="USVString" id="dom-filesystementry-fullpath"><code><c- g>fullPath</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#filesystem" id="ref-for-filesystem"><c- n>FileSystem</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="attribute" data-export data-readonly data-type="FileSystem" id="dom-filesystementry-filesystem"><code><c- g>filesystem</c-></code></dfn>;

    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystementry-getparent" id="ref-for-dom-filesystementry-getparent"><c- g>getParent</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback"><c- n>FileSystemEntryCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemEntry/getParent(successCallback, errorCallback), FileSystemEntry/getParent(successCallback), FileSystemEntry/getParent()" data-dfn-type="argument" data-export id="dom-filesystementry-getparent-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code><a class="self-link" href="#dom-filesystementry-getparent-successcallback-errorcallback-successcallback"></a></dfn>,
                   <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback①"><c- n>ErrorCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemEntry/getParent(successCallback, errorCallback), FileSystemEntry/getParent(successCallback), FileSystemEntry/getParent()" data-dfn-type="argument" data-export id="dom-filesystementry-getparent-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code><a class="self-link" href="#dom-filesystementry-getparent-successcallback-errorcallback-errorcallback"></a></dfn>);
};
</pre>
   <p>An <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry⑤">FileSystemEntry</a></code> has an associated <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept⑨">entry</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-isfile" id="ref-for-dom-filesystementry-isfile">isFile</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry⑥">FileSystemEntry</a></code> interface must return true if the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⓪">entry</a> is a <a data-link-type="dfn" href="#file-entry" id="ref-for-file-entry">file entry</a> and
false otherwise.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-isdirectory" id="ref-for-dom-filesystementry-isdirectory">isDirectory</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry⑦">FileSystemEntry</a></code> interface must return true if the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①①">entry</a> is a <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry①">directory entry</a> and false otherwise.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-name" id="ref-for-dom-filesystementry-name">name</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry⑧">FileSystemEntry</a></code> interface must return the <a data-link-type="dfn" href="#entry-name" id="ref-for-entry-name">name</a> of the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①②">entry</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-fullpath" id="ref-for-dom-filesystementry-fullpath">fullPath</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry⑨">FileSystemEntry</a></code> interface must return the <a data-link-type="dfn" href="#full-path" id="ref-for-full-path">full path</a> of the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①③">entry</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-filesystem" id="ref-for-dom-filesystementry-filesystem">filesystem</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry①⓪">FileSystemEntry</a></code> interface must return the <a data-link-type="dfn" href="#entry-file-system" id="ref-for-entry-file-system">file system</a> of
the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①④">entry</a>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemEntry" data-dfn-type="method" data-export data-lt="getParent(successCallback, errorCallback)|getParent(successCallback)|getParent()" id="dom-filesystementry-getparent"><code>getParent(<var>successCallback</var>, <var>errorCallback</var>)</code></dfn> method, when invoked, must run the following
steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Let <var>path</var> be the result of running the steps to <a data-link-type="dfn" href="#resolve-a-relative-path" id="ref-for-resolve-a-relative-path">resolve a
relative path</a> with the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⑤">entry</a>'s <a data-link-type="dfn" href="#full-path" id="ref-for-full-path①">full path</a> and '..'.</p>
       <li data-md>
        <p>Let <var>item</var> be the result of running the steps to <a data-link-type="dfn" href="#evaluate-a-path" id="ref-for-evaluate-a-path">evaluate a
path</a> with the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⑥">entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root①">root</a> and <var>path</var>.</p>
       <li data-md>
        <p>If <var>item</var> is <em>failure</em>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notfounderror" id="ref-for-notfounderror">NotFoundError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>Let <var>entry</var> be a new <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry②">directory entry</a> with <var>item</var>’s <a data-link-type="dfn" href="#directory-name" id="ref-for-directory-name">name</a> as <a data-link-type="dfn" href="#entry-name" id="ref-for-entry-name①">name</a> and <var>path</var> as <a data-link-type="dfn" href="#full-path" id="ref-for-full-path②">full
path</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①">Invoke</a> <var>successCallback</var> with a new <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry">FileSystemDirectoryEntry</a></code> object associated with <var>entry</var>.</p>
      </ol>
    </ol>
   </div>
   <aside class="note"> An error is possible if files have been modified on disk since the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry①①">FileSystemEntry</a></code> was created. </aside>
   <aside class="example" id="example-12cccfb6">
    <a class="self-link" href="#example-12cccfb6"></a> Handling an entry: 
<pre class="language-js highlight"><c- a>function</c-> handleEntry<c- p>(</c->entry<c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'name: '</c-> <c- o>+</c-> entry<c- p>.</c->name<c- p>);</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'path: '</c-> <c- o>+</c-> entry<c- p>.</c->fullPath<c- p>);</c->
  <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->isFile<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'... is a file'</c-><c- p>);</c->
  <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->isDirectory<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'... is a directory'</c-><c- p>);</c->
  <c- p>}</c->
<c- p>}</c->
</pre>
   </aside>
   <aside class="example" id="example-0f2eb1d5">
    <a class="self-link" href="#example-0f2eb1d5"></a> Helper function to adapt <code class="idl"><a data-link-type="idl" href="#dom-filesystementry-getparent" id="ref-for-dom-filesystementry-getparent①">getParent()</a></code> for use with <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects">Promises</a> <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a>: 
<pre class="language-js highlight"><c- a>function</c-> getParentAsPromise<c- p>(</c->entry<c- p>)</c-> <c- p>{</c->
  <c- k>return</c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    entry<c- p>.</c->getParent<c- p>(</c->resolve<c- p>,</c-> reject<c- p>);</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   </aside>
   <h3 class="heading settled" data-level="7.2" id="api-directoryentry"><span class="secno">7.2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry①">FileSystemDirectoryEntry</a></code> Interface</span><a class="self-link" href="#api-directoryentry"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="filesystemdirectoryentry"><code><c- g>FileSystemDirectoryEntry</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①②"><c- n>FileSystemEntry</c-></a> {
    <a class="n" data-link-type="idl-name" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader"><c- n>FileSystemDirectoryReader</c-></a> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-createreader" id="ref-for-dom-filesystemdirectoryentry-createreader"><c- g>createReader</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-getfile" id="ref-for-dom-filesystemdirectoryentry-getfile"><c- g>getFile</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑤"><c- b>USVString</c-></a>? <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getFile(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getFile(path, options, successCallback), FileSystemDirectoryEntry/getFile(path, options), FileSystemDirectoryEntry/getFile(path), FileSystemDirectoryEntry/getFile()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-path"><code><c- g>path</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-path"></a></dfn>,
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-filesystemflags" id="ref-for-dictdef-filesystemflags"><c- n>FileSystemFlags</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getFile(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getFile(path, options, successCallback), FileSystemDirectoryEntry/getFile(path, options), FileSystemDirectoryEntry/getFile(path), FileSystemDirectoryEntry/getFile()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-options"></a></dfn> = {},
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback①"><c- n>FileSystemEntryCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getFile(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getFile(path, options, successCallback), FileSystemDirectoryEntry/getFile(path, options), FileSystemDirectoryEntry/getFile(path), FileSystemDirectoryEntry/getFile()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-successcallback"></a></dfn>,
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback②"><c- n>ErrorCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getFile(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getFile(path, options, successCallback), FileSystemDirectoryEntry/getFile(path, options), FileSystemDirectoryEntry/getFile(path), FileSystemDirectoryEntry/getFile()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-errorcallback"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-getdirectory" id="ref-for-dom-filesystemdirectoryentry-getdirectory"><c- g>getDirectory</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑥"><c- b>USVString</c-></a>? <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getDirectory(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getDirectory(path, options, successCallback), FileSystemDirectoryEntry/getDirectory(path, options), FileSystemDirectoryEntry/getDirectory(path), FileSystemDirectoryEntry/getDirectory()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-path"><code><c- g>path</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-path"></a></dfn>,
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-filesystemflags" id="ref-for-dictdef-filesystemflags①"><c- n>FileSystemFlags</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getDirectory(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getDirectory(path, options, successCallback), FileSystemDirectoryEntry/getDirectory(path, options), FileSystemDirectoryEntry/getDirectory(path), FileSystemDirectoryEntry/getDirectory()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-options"></a></dfn> = {},
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback②"><c- n>FileSystemEntryCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getDirectory(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getDirectory(path, options, successCallback), FileSystemDirectoryEntry/getDirectory(path, options), FileSystemDirectoryEntry/getDirectory(path), FileSystemDirectoryEntry/getDirectory()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-successcallback"></a></dfn>,
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback③"><c- n>ErrorCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry/getDirectory(path, options, successCallback, errorCallback), FileSystemDirectoryEntry/getDirectory(path, options, successCallback), FileSystemDirectoryEntry/getDirectory(path, options), FileSystemDirectoryEntry/getDirectory(path), FileSystemDirectoryEntry/getDirectory()" data-dfn-type="argument" data-export id="dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-errorcallback"></a></dfn>);
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-filesystemflags"><code><c- g>FileSystemFlags</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="FileSystemFlags" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-filesystemflags-create"><code><c- g>create</c-></code></dfn> = <c- b>false</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="FileSystemFlags" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-filesystemflags-exclusive"><code><c- g>exclusive</c-></code></dfn> = <c- b>false</c->;
};

<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-filesystementrycallback"><code><c- g>FileSystemEntryCallback</c-></code></dfn> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①③"><c- n>FileSystemEntry</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemEntryCallback" data-dfn-type="argument" data-export id="dom-filesystementrycallback-entry"><code><c- g>entry</c-></code><a class="self-link" href="#dom-filesystementrycallback-entry"></a></dfn>);
</pre>
   <aside class="note"> The <code class="idl"><a data-link-type="idl" href="#dom-filesystemflags-create" id="ref-for-dom-filesystemflags-create">create</a></code> member of <code class="idl"><a data-link-type="idl" href="#dictdef-filesystemflags" id="ref-for-dictdef-filesystemflags②">FileSystemFlags</a></code> and
  the associated behavior are included for compatibility with existing
  implementations, even though there is no useful behavior when the
  flag is specified. Similarly, the <code class="idl"><a data-link-type="idl" href="#dom-filesystemflags-exclusive" id="ref-for-dom-filesystemflags-exclusive">exclusive</a></code> member is not explicitly referenced, but the binding behavior is
  observable from script if an object with a getter is passed. </aside>
   <p>A <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry②">FileSystemDirectoryEntry</a></code>'s associated <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⑦">entry</a> is a <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry③">directory
entry</a>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemDirectoryEntry" data-dfn-type="method" data-export id="dom-filesystemdirectoryentry-createreader"><code>createReader()</code></dfn> method, when invoked, must run the following steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p>Let <var>reader</var> be a new <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader">directory reader</a> associated with the <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry④">directory entry</a>'s <a data-link-type="dfn" href="#directory" id="ref-for-directory①①">directory</a>.</p>
     <li data-md>
      <p>Return a newly created <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader①">FileSystemDirectoryReader</a></code> object
associated with <var>reader</var>.</p>
    </ol>
   </div>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemDirectoryEntry" data-dfn-type="method" data-export data-lt="getFile(path, options, successCallback, errorCallback)|getFile(path, options, successCallback)|getFile(path, options)|getFile(path)|getFile()" id="dom-filesystemdirectoryentry-getfile"><code>getFile(<var>path</var>, <var>options</var>, <var>successCallback</var>, <var>errorCallback</var>)</code></dfn> method, when
invoked, must run the following steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> to run the following substeps:</p>
      <ol>
       <li data-md>
        <p>If <var>path</var> is undefined or null let <var>path</var> be the empty string.</p>
       <li data-md>
        <p>If <var>path</var> is not a <a data-link-type="dfn" href="#valid-path" id="ref-for-valid-path">valid path</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function②">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception①">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror①">TypeMismatchError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-filesystemflags-create" id="ref-for-dom-filesystemflags-create①">create</a></code> member is true, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function③">invoke</a> <var>errorCallback</var> (if given) with a
newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception②">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code>, and terminate
these steps.</p>
       <li data-md>
        <p>Let <var>path</var> be the result of running the steps to <a data-link-type="dfn" href="#resolve-a-relative-path" id="ref-for-resolve-a-relative-path①">resolve a
relative path</a> with the <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry⑤">directory entry</a>'s <a data-link-type="dfn" href="#full-path" id="ref-for-full-path③">full path</a> and <var>path</var>.</p>
       <li data-md>
        <p>Let <var>item</var> be the result of running the steps to <a data-link-type="dfn" href="#evaluate-a-path" id="ref-for-evaluate-a-path①">evaluate a
path</a> with the <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry⑥">directory entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root②">root</a> and <var>path</var>.</p>
       <li data-md>
        <p>If <var>item</var> is <em>failure</em>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function④">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception③">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notfounderror" id="ref-for-notfounderror①">NotFoundError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>item</var> is not a <a data-link-type="dfn" href="#file" id="ref-for-file⑥">file</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function⑤">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception④">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror②">TypeMismatchError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>Let <var>entry</var> be a new <a data-link-type="dfn" href="#file-entry" id="ref-for-file-entry①">file entry</a> with <var>item</var>’s <a data-link-type="dfn" href="#file-name" id="ref-for-file-name">name</a> as <a data-link-type="dfn" href="#entry-name" id="ref-for-entry-name②">name</a> and <var>path</var> as <a data-link-type="dfn" href="#full-path" id="ref-for-full-path④">full path</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function⑥">Invoke</a> <var>successCallback</var> (if given) with a new <code class="idl"><a data-link-type="idl" href="#filesystemfileentry" id="ref-for-filesystemfileentry">FileSystemFileEntry</a></code> object associated with <var>entry</var>.</p>
      </ol>
    </ol>
   </div>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemDirectoryEntry" data-dfn-type="method" data-export data-lt="getDirectory(path, options, successCallback, errorCallback)|getDirectory(path, options, successCallback)|getDirectory(path, options)|getDirectory(path)|getDirectory()" id="dom-filesystemdirectoryentry-getdirectory"><code>getDirectory(<var>path</var>, <var>options</var>, <var>successCallback</var>, <var>errorCallback</var>)</code></dfn> method, when
invoked, must run the following steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">Queue a task</a> to run the following substeps:</p>
      <ol>
       <li data-md>
        <p>If <var>path</var> is undefined or null let <var>path</var> be the empty string.</p>
       <li data-md>
        <p>If <var>path</var> is not a <a data-link-type="dfn" href="#valid-path" id="ref-for-valid-path①">valid path</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function⑦">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception⑤">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror③">TypeMismatchError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑥">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>options</var>’s <code class="idl"><a data-link-type="idl" href="#dom-filesystemflags-create" id="ref-for-dom-filesystemflags-create②">create</a></code> member is true, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function⑧">invoke</a> <var>errorCallback</var> (if given) with a
newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception⑥">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror①">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑦">DOMException</a></code>, and terminate
these steps.</p>
       <li data-md>
        <p>Let <var>path</var> be the result of running the steps to <a data-link-type="dfn" href="#resolve-a-relative-path" id="ref-for-resolve-a-relative-path②">resolve a
relative path</a> with the <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry⑦">directory entry</a>'s <a data-link-type="dfn" href="#full-path" id="ref-for-full-path⑤">full path</a> and <var>path</var>.</p>
       <li data-md>
        <p>Let <var>item</var> be the result of running the steps to <a data-link-type="dfn" href="#evaluate-a-path" id="ref-for-evaluate-a-path②">evaluate a
path</a> with the <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry⑧">directory entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root③">root</a> and <var>path</var>.</p>
       <li data-md>
        <p>If <var>item</var> is <em>failure</em>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function⑨">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception⑦">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notfounderror" id="ref-for-notfounderror②">NotFoundError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑧">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>item</var> is not a <a data-link-type="dfn" href="#directory" id="ref-for-directory①②">directory</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⓪">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception⑧">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror④">TypeMismatchError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑨">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>Let <var>entry</var> be a new <a data-link-type="dfn" href="#directory-entry" id="ref-for-directory-entry⑨">directory entry</a> with <var>item</var>’s <a data-link-type="dfn" href="#directory-name" id="ref-for-directory-name①">name</a> as <a data-link-type="dfn" href="#entry-name" id="ref-for-entry-name③">name</a> and <var>path</var> as <a data-link-type="dfn" href="#full-path" id="ref-for-full-path⑥">full
path</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①①">invoke</a> <var>successCallback</var> (if given) with a new <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry③">FileSystemDirectoryEntry</a></code> associated with <var>entry</var>.</p>
      </ol>
    </ol>
   </div>
   <aside class="example" id="example-cfea322c">
    <a class="self-link" href="#example-cfea322c"></a> Helper functions to adapt <code class="idl"><a data-link-type="idl" href="#dom-filesystemdirectoryentry-getfile" id="ref-for-dom-filesystemdirectoryentry-getfile①">getFile()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-filesystemdirectoryentry-getdirectory" id="ref-for-dom-filesystemdirectoryentry-getdirectory①">getDirectory()</a></code> for use
with <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects①">Promises</a> <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a>: 
<pre class="language-js highlight"><c- a>function</c-> getFileAsPromise<c- p>(</c->entry<c- p>,</c-> path<c- p>)</c-> <c- p>{</c->
  <c- k>return</c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    entry<c- p>.</c->getFile<c- p>(</c->path<c- p>,</c-> <c- p>{},</c-> resolve<c- p>,</c-> reject<c- p>);</c->
  <c- p>});</c->
<c- p>}</c->
<c- a>function</c-> getDirectoryAsPromise<c- p>(</c->entry<c- p>,</c-> path<c- p>)</c-> <c- p>{</c->
  <c- k>return</c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    entry<c- p>.</c->getDirectory<c- p>(</c->path<c- p>,</c-> <c- p>{},</c-> resolve<c- p>,</c-> reject<c- p>);</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   </aside>
   <h3 class="heading settled" data-level="7.3" id="api-directoryreader"><span class="secno">7.3. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader②">FileSystemDirectoryReader</a></code> Interface</span><a class="self-link" href="#api-directoryreader"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="filesystemdirectoryreader"><code><c- g>FileSystemDirectoryReader</c-></code></dfn> {
    <c- b>void</c-> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryReader" data-dfn-type="method" data-export data-lt="readEntries(successCallback, errorCallback)|readEntries(successCallback)" id="dom-filesystemdirectoryreader-readentries"><code><c- g>readEntries</c-></code><a class="self-link" href="#dom-filesystemdirectoryreader-readentries"></a></dfn>(<a class="n" data-link-type="idl-name" href="#callbackdef-filesystementriescallback" id="ref-for-callbackdef-filesystementriescallback"><c- n>FileSystemEntriesCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryReader/readEntries(successCallback, errorCallback), FileSystemDirectoryReader/readEntries(successCallback)" data-dfn-type="argument" data-export id="dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-successcallback"></a></dfn>,
                     <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback④"><c- n>ErrorCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemDirectoryReader/readEntries(successCallback, errorCallback), FileSystemDirectoryReader/readEntries(successCallback)" data-dfn-type="argument" data-export id="dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code><a class="self-link" href="#dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-errorcallback"></a></dfn>);
};
<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-filesystementriescallback"><code><c- g>FileSystemEntriesCallback</c-></code></dfn> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①④"><c- n>FileSystemEntry</c-></a>> <dfn class="idl-code" data-dfn-for="FileSystemEntriesCallback" data-dfn-type="argument" data-export id="dom-filesystementriescallback-entries"><code><c- g>entries</c-></code><a class="self-link" href="#dom-filesystementriescallback-entries"></a></dfn>);
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader③">FileSystemDirectoryReader</a></code> has an associated <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader①">directory reader</a>.</p>
   <p>The <dfn class="idl-code" data-dfn-for="FileSystemDirectoryEntry" data-dfn-type="method" data-export data-lt="readEntries(successCallback, errorCallback)" id="dom-filesystemdirectoryentry-readentries"><code>readEntries(<var>successCallback</var>, <var>errorCallback</var>)</code><a class="self-link" href="#dom-filesystemdirectoryentry-readentries"></a></dfn> method, when invoked, must run the following
steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader②">directory reader</a>'s <a data-link-type="dfn" href="#reading-flag" id="ref-for-reading-flag">reading flag</a> is set, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">queue a
task</a> to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①②">invoke</a> <var>errorCallback</var> with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception⑨">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⓪">DOMException</a></code>, and terminate these
steps.</p>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader③">directory reader</a>'s <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error">reader error</a> is not null, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task④">queue
a task</a> to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①③">invoke</a> <var>errorCallback</var> (if given)
with <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error①">reader error</a>, and terminate these steps.</p>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader④">directory reader</a>'s <a data-link-type="dfn" href="#done-flag" id="ref-for-done-flag">done flag</a> is set, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑤">queue a
task</a> to <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①④">invoke</a> <var>successCallback</var> with an empty
sequence and terminate these steps.</p>
     <li data-md>
      <p>Set the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader⑤">directory reader</a>'s <a data-link-type="dfn" href="#reading-flag" id="ref-for-reading-flag①">reading flag</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑥">Queue a task</a> to perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Clear the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader⑥">directory reader</a>'s <a data-link-type="dfn" href="#reading-flag" id="ref-for-reading-flag②">reading flag</a>.</p>
       <li data-md>
        <p>Let <var>dir</var> be the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader⑦">directory reader</a>'s <a data-link-type="dfn" href="#directory" id="ref-for-directory①③">directory</a>.</p>
       <li data-md>
        <p>If <var>dir</var> is null, run these substeps:</p>
        <ol>
         <li data-md>
          <p>Let <var>dir</var> be the result of running the steps to <a data-link-type="dfn" href="#evaluate-a-path" id="ref-for-evaluate-a-path③">evaluate
a path</a> with the <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⑧">entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root④">root</a> and <a data-link-type="dfn" href="#full-path" id="ref-for-full-path⑦">full path</a>.</p>
         <li data-md>
          <p>If <var>dir</var> is failure, set the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader⑧">directory reader</a>'s <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error②">reader error</a> to a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception①⓪">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notfounderror" id="ref-for-notfounderror③">NotFoundError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①①">DOMException</a></code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⑤">invoke</a> <var>errorCallback</var> (if given) with <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error③">reader error</a>, and terminate these
steps.</p>
         <li data-md>
          <p>Set the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader⑨">directory reader</a>'s <a data-link-type="dfn" href="#directory" id="ref-for-directory①④">directory</a> to <var>dir</var>.</p>
        </ol>
       <li data-md>
        <p>Let <var>entries</var> be a non-zero number of entries from the <var>dir</var> that have not yet been produced by this <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader①⓪">directory reader</a>, if any.</p>
       <li data-md>
        <p>If the previous step failed (for example, the <a data-link-type="dfn" href="#directory" id="ref-for-directory①⑤">directory</a> was
deleted or permission is denied), then set the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader①①">directory
reader</a>'s <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error④">reader error</a> to an appropriate <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①②">DOMException</a></code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⑥">invoke</a> <var>errorCallback</var> (if given) with <a data-link-type="dfn" href="#reader-error" id="ref-for-reader-error⑤">reader error</a>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>entries</var> is empty, set the <a data-link-type="dfn" href="#directory-reader" id="ref-for-directory-reader①②">directory reader</a>'s <a data-link-type="dfn" href="#done-flag" id="ref-for-done-flag①">done
flag</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⑦">invoke</a> <var>successCallback</var> with <var>entries</var>.</p>
      </ol>
    </ol>
   </div>
   <aside class="example" id="example-365d0f51">
    <a class="self-link" href="#example-365d0f51"></a> Enumerating a directory: 
<pre class="language-js highlight"><c- a>let</c-> reader <c- o>=</c-> dirEntry<c- p>.</c->createReader<c- p>();</c->
<c- a>let</c-> doBatch <c- o>=</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->

    <c- c1>// Read a batch.</c->
    reader<c- p>.</c->readEntries<c- p>(</c->entries <c- p>=></c-> <c- p>{</c->

      <c- c1>// Complete?</c->
      <c- k>if</c-> <c- p>(</c->entries<c- p>.</c->length <c- o>===</c-> <c- mi>0</c-><c- p>)</c-> <c- p>{</c->
        <c- k>return</c-><c- p>;</c->
      <c- p>}</c->

      <c- c1>// Process the batch.</c->
      entries<c- p>.</c->forEach<c- p>(</c->handleEntry<c- p>);</c->

      <c- c1>// Read the next batch.</c->
      doBatch<c- p>();</c->

    <c- p>},</c-> error <c- p>=></c-> console<c- p>.</c->warn<c- p>(</c->error<c- p>));</c->
  <c- p>};</c->

<c- c1>// Start reading</c->
doBatch<c- p>();</c->
</pre>
   </aside>
   <aside class="example" id="example-f498e3dc">
    <a class="self-link" href="#example-f498e3dc"></a> Helper function to adapt <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader④">FileSystemDirectoryReader</a></code> for use with <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects②">Promises</a> <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a>: 
<pre class="language-js highlight"><c- a>function</c-> getEntriesAsPromise<c- p>(</c->dirEntry<c- p>)</c-> <c- p>{</c->
  <c- k>return</c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    <c- kr>const</c-> result <c- o>=</c-> <c- p>[];</c->
    <c- kr>const</c-> reader <c- o>=</c-> dirEntry<c- p>.</c->createReader<c- p>();</c->
    <c- kr>const</c-> doBatch <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
      reader<c- p>.</c->readEntries<c- p>(</c->entries <c- p>=></c-> <c- p>{</c->
        <c- k>if</c-> <c- p>(</c->entries<c- p>.</c->length <c- o>></c-> <c- mi>0</c-><c- p>)</c-> <c- p>{</c->
          entries<c- p>.</c->forEach<c- p>(</c->e <c- p>=></c-> result<c- p>.</c->push<c- p>(</c->e<c- p>));</c->
          doBatch<c- p>();</c->
        <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
          resolve<c- p>(</c->result<c- p>);</c->
        <c- p>}</c->
      <c- p>},</c-> reject<c- p>);</c->
    <c- p>};</c->
    doBatch<c- p>();</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   </aside>
   <aside class="example" id="example-a4632681">
    <a class="self-link" href="#example-a4632681"></a> Helper function to adapt <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader⑤">FileSystemDirectoryReader</a></code> for use with <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-asynciterator-interface" id="ref-for-sec-asynciterator-interface">AsyncIterators</a> <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a>: 
<pre class="language-js highlight">async <c- a>function</c-><c- o>*</c-> getEntriesAsAsyncIterator<c- p>(</c->dirEntry<c- p>)</c-> <c- p>{</c->
  <c- kr>const</c-> reader <c- o>=</c-> dirEntry<c- p>.</c->createReader<c- p>();</c->
  <c- kr>const</c-> getNextBatch <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    reader<c- p>.</c->readEntries<c- p>(</c->resolve<c- p>,</c-> reject<c- p>);</c->
  <c- p>});</c->

  <c- k>do</c-> <c- p>{</c->
    <c- kr>const</c-> entries <c- o>=</c-> await getNextBatch<c- p>();</c->
    <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> entry <c- k>of</c-> entries<c- p>)</c-> <c- p>{</c->
      <c- k>yield</c-> entry<c- p>;</c->
    <c- p>}</c->
  <c- p>}</c-> <c- k>while</c-> <c- p>(</c->entries<c- p>.</c->length <c- o>></c-> <c- mi>0</c-><c- p>);</c->
<c- p>}</c->
</pre>
    <p>This allows for ordered asynchronous traversal of a directory tree
using <code>for-await-of</code>:</p>
<pre class="language-js highlight">async <c- a>function</c-> show<c- p>(</c->entry<c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c->entry<c- p>.</c->fullPath<c- p>);</c->
  <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->isDirectory<c- p>)</c-> <c- p>{</c->
    <c- k>for</c-> await <c- p>(</c-><c- kr>const</c-> e <c- k>of</c-> getEntriesAsAsyncIterator<c- p>(</c->entry<c- p>))</c->
      await show<c- p>(</c->e<c- p>);</c->
  <c- p>}</c->
<c- p>}</c->
</pre>
   </aside>
   <h3 class="heading settled" data-level="7.4" id="api-fileentry"><span class="secno">7.4. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#filesystemfileentry" id="ref-for-filesystemfileentry①">FileSystemFileEntry</a></code> Interface</span><a class="self-link" href="#api-fileentry"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="filesystemfileentry"><code><c- g>FileSystemFileEntry</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①⑤"><c- n>FileSystemEntry</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemfileentry-file" id="ref-for-dom-filesystemfileentry-file"><c- g>file</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-filecallback" id="ref-for-callbackdef-filecallback"><c- n>FileCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemFileEntry/file(successCallback, errorCallback), FileSystemFileEntry/file(successCallback)" data-dfn-type="argument" data-export id="dom-filesystemfileentry-file-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code><a class="self-link" href="#dom-filesystemfileentry-file-successcallback-errorcallback-successcallback"></a></dfn>,
              <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback⑤"><c- n>ErrorCallback</c-></a> <dfn class="idl-code" data-dfn-for="FileSystemFileEntry/file(successCallback, errorCallback), FileSystemFileEntry/file(successCallback)" data-dfn-type="argument" data-export id="dom-filesystemfileentry-file-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code><a class="self-link" href="#dom-filesystemfileentry-file-successcallback-errorcallback-errorcallback"></a></dfn>);
};
<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-filecallback"><code><c- g>FileCallback</c-></code></dfn> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file⑤"><c- n>File</c-></a> <dfn class="idl-code" data-dfn-for="FileCallback" data-dfn-type="argument" data-export id="dom-filecallback-file"><code><c- g>file</c-></code><a class="self-link" href="#dom-filecallback-file"></a></dfn>);
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#filesystemfileentry" id="ref-for-filesystemfileentry②">FileSystemFileEntry</a></code>'s associated <a data-link-type="dfn" href="#entry-concept" id="ref-for-entry-concept①⑨">entry</a> is a <a data-link-type="dfn" href="#file-entry" id="ref-for-file-entry②">file entry</a>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystemFileEntry" data-dfn-type="method" data-export data-lt="file(successCallback, errorCallback)|file(successCallback)" id="dom-filesystemfileentry-file"><code>file(<var>successCallback</var>, <var>errorCallback</var>)</code></dfn> method, when invoked, must run the following
steps:</p>
   <div class="algorithm">
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑦">Queue a task</a> to perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Let <var>item</var> be the result of running the steps to <a data-link-type="dfn" href="#evaluate-a-path" id="ref-for-evaluate-a-path④">evaluate a
path</a> with the <a data-link-type="dfn" href="#file-entry" id="ref-for-file-entry③">file entry</a>'s <a data-link-type="dfn" href="#entry-root" id="ref-for-entry-root⑤">root</a> and <a data-link-type="dfn" href="#full-path" id="ref-for-full-path⑧">full
path</a>.</p>
       <li data-md>
        <p>If <var>item</var> is <em>failure</em>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⑧">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception①①">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notfounderror" id="ref-for-notfounderror④">NotFoundError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①③">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p>If <var>item</var> is a <a data-link-type="dfn" href="#directory" id="ref-for-directory①⑥">directory</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①⑨">invoke</a> <var>errorCallback</var> (if given) with a newly <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-exception" id="ref-for-dfn-create-exception①②">created</a> "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror" id="ref-for-typemismatcherror⑤">TypeMismatchError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①④">DOMException</a></code>, and terminate these steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function②⓪">invoke</a> <var>successCallback</var> with a new <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file⑥">File</a></code> object representing <var>item</var>.</p>
      </ol>
    </ol>
   </div>
   <aside class="example" id="example-e1bb7fa1">
    <a class="self-link" href="#example-e1bb7fa1"></a> Read the contents of a dropped file using <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/FileAPI/#dfn-filereader" id="ref-for-dfn-filereader">FileReader</a></code>: 
<pre class="language-js highlight"><c- a>function</c-> readFileEntry<c- p>(</c->entry<c- p>)</c-> <c- p>{</c->
  entry<c- p>.</c->file<c- p>(</c->file <c- p>=></c-> <c- p>{</c->
    <c- kr>const</c-> reader <c- o>=</c-> <c- k>new</c-> FileReader<c- p>();</c->
    reader<c- p>.</c->readAsText<c- p>(</c->file<c- p>);</c->
    reader<c- p>.</c->onerror <c- o>=</c-> error <c- p>=></c-> console<c- p>.</c->warn<c- p>(</c->error<c- p>);</c->
    reader<c- p>.</c->onload <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
      console<c- p>.</c->log<c- p>(</c->reader<c- p>.</c->result<c- p>);</c->
    <c- p>};</c->
  <c- p>},</c-> error <c- p>=></c-> console<c- p>.</c->warn<c- p>(</c->error<c- p>));</c->
<c- p>}</c->
</pre>
   </aside>
   <aside class="example" id="example-b5fb1a1b">
    <a class="self-link" href="#example-b5fb1a1b"></a> Helper function to adapt <code class="idl"><a data-link-type="idl" href="#dom-filesystemfileentry-file" id="ref-for-dom-filesystemfileentry-file①">file()</a></code> for use
with <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects③">Promises</a> <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a>: 
<pre class="language-js highlight"><c- a>function</c-> fileAsPromise<c- p>(</c->entry<c- p>)</c-> <c- p>{</c->
  <c- k>return</c-> <c- k>new</c-> Promise<c- p>((</c->resolve<c- p>,</c-> reject<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    entry<c- p>.</c->file<c- p>(</c->resolve<c- p>,</c-> reject<c- p>);</c->
  <c- p>});</c->
<c- p>}</c->
</pre>
   </aside>
   <h3 class="heading settled" data-level="7.5" id="api-domfilesystem"><span class="secno">7.5. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#filesystem" id="ref-for-filesystem①">FileSystem</a></code> Interface</span><a class="self-link" href="#api-domfilesystem"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="filesystem"><code><c- g>FileSystem</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑦"><c- b>USVString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystem" data-dfn-type="attribute" data-export data-readonly data-type="USVString" id="dom-filesystem-name"><code><c- g>name</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry④"><c- n>FileSystemDirectoryEntry</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FileSystem" data-dfn-type="attribute" data-export data-readonly data-type="FileSystemDirectoryEntry" id="dom-filesystem-root"><code><c- g>root</c-></code></dfn>;
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#filesystem" id="ref-for-filesystem②">FileSystem</a></code> has an associated <a data-link-type="dfn" href="#file-system" id="ref-for-file-system⑤">file system</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystem-name" id="ref-for-dom-filesystem-name">name</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystem" id="ref-for-filesystem③">FileSystem</a></code> interface must return the <a data-link-type="dfn" href="#file-system-name" id="ref-for-file-system-name②">name</a> of the <a data-link-type="dfn" href="#file-system" id="ref-for-file-system⑥">file system</a>.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-filesystem-root" id="ref-for-dom-filesystem-root">root</a></code> attribute of the <code class="idl"><a data-link-type="idl" href="#filesystem" id="ref-for-filesystem④">FileSystem</a></code> interface must
return a <code class="idl"><a data-link-type="idl" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry⑤">FileSystemDirectoryEntry</a></code> associated with the <a data-link-type="dfn" href="#file-system-root" id="ref-for-file-system-root">root</a> of the <a data-link-type="dfn" href="#file-system" id="ref-for-file-system⑦">file system</a>.</p>
   <h2 class="heading settled" data-level="8" id="acknowledgements"><span class="secno">8. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>This specification is based heavily on the work of Eric Uhrhane in <a data-link-type="biblio" href="#biblio-file-system-api">[file-system-api]</a>, which introduced the <code class="idl"><a data-link-type="idl" href="#filesystementry" id="ref-for-filesystementry①⑥">FileSystemEntry</a></code> types.</p>
   <p>Thanks to Tab Atkins, Jr. for creating and maintaining <a href="https://github.com/tabatkins/bikeshed">Bikeshed</a>, the
specification authoring tool used to create this document.</p>
   <p>And thanks to
Ali Alabbas,
Philip Jägenstedt,
Marijn Kruisselbrink,
Olli Pettay,
and
Kent Tamura
for suggestions, reviews, and other feedback.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#absolute-path">absolute path</a><span>, in §2.1</span>
   <li><a href="#dom-filesystemflags-create">create</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-createreader">createReader()</a><span>, in §7.2</span>
   <li><a href="#directory">directory</a><span>, in §2.2</span>
   <li><a href="#directory-entry">directory entry</a><span>, in §2.3</span>
   <li><a href="#directory-reader">directory reader</a><span>, in §2.4</span>
   <li><a href="#done-flag">done flag</a><span>, in §2.4</span>
   <li><a href="#entry-concept">entry</a><span>, in §2.3</span>
   <li><a href="#callbackdef-errorcallback">ErrorCallback</a><span>, in §7</span>
   <li><a href="#evaluate-a-path">evaluate a path</a><span>, in §3</span>
   <li><a href="#dom-filesystemflags-exclusive">exclusive</a><span>, in §7.2</span>
   <li><a href="#file">file</a><span>, in §2.2</span>
   <li><a href="#callbackdef-filecallback">FileCallback</a><span>, in §7.4</span>
   <li><a href="#file-entry">file entry</a><span>, in §2.3</span>
   <li><a href="#dom-filesystemfileentry-file">file(successCallback)</a><span>, in §7.4</span>
   <li><a href="#dom-filesystemfileentry-file">file(successCallback, errorCallback)</a><span>, in §7.4</span>
   <li>
    file system
    <ul>
     <li><a href="#file-system">definition of</a><span>, in §2.2</span>
     <li><a href="#entry-file-system">dfn for entry</a><span>, in §2.3</span>
    </ul>
   <li><a href="#filesystem">FileSystem</a><span>, in §7.5</span>
   <li><a href="#dom-filesystementry-filesystem">filesystem</a><span>, in §7.1</span>
   <li><a href="#filesystemdirectoryentry">FileSystemDirectoryEntry</a><span>, in §7.2</span>
   <li><a href="#filesystemdirectoryreader">FileSystemDirectoryReader</a><span>, in §7.3</span>
   <li><a href="#callbackdef-filesystementriescallback">FileSystemEntriesCallback</a><span>, in §7.3</span>
   <li><a href="#filesystementry">FileSystemEntry</a><span>, in §7.1</span>
   <li><a href="#callbackdef-filesystementrycallback">FileSystemEntryCallback</a><span>, in §7.2</span>
   <li><a href="#filesystemfileentry">FileSystemFileEntry</a><span>, in §7.4</span>
   <li><a href="#dictdef-filesystemflags">FileSystemFlags</a><span>, in §7.2</span>
   <li><a href="#full-path">full path</a><span>, in §2.3</span>
   <li><a href="#dom-filesystementry-fullpath">fullPath</a><span>, in §7.1</span>
   <li><a href="#dom-filesystemdirectoryentry-getdirectory">getDirectory()</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getdirectory">getDirectory(path)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getdirectory">getDirectory(path, options)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getdirectory">getDirectory(path, options, successCallback)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getdirectory">getDirectory(path, options, successCallback, errorCallback)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getfile">getFile()</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getfile">getFile(path)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getfile">getFile(path, options)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getfile">getFile(path, options, successCallback)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystemdirectoryentry-getfile">getFile(path, options, successCallback, errorCallback)</a><span>, in §7.2</span>
   <li><a href="#dom-filesystementry-getparent">getParent()</a><span>, in §7.1</span>
   <li><a href="#dom-filesystementry-getparent">getParent(successCallback)</a><span>, in §7.1</span>
   <li><a href="#dom-filesystementry-getparent">getParent(successCallback, errorCallback)</a><span>, in §7.1</span>
   <li><a href="#dom-filesystementry-isdirectory">isDirectory</a><span>, in §7.1</span>
   <li><a href="#dom-filesystementry-isfile">isFile</a><span>, in §7.1</span>
   <li>
    name
    <ul>
     <li><a href="#dom-filesystem-name">attribute for FileSystem</a><span>, in §7.5</span>
     <li><a href="#dom-filesystementry-name">attribute for FileSystemEntry</a><span>, in §7.1</span>
     <li><a href="#name">definition of</a><span>, in §2.1</span>
     <li><a href="#directory-name">dfn for directory</a><span>, in §2.2</span>
     <li><a href="#entry-name">dfn for entry</a><span>, in §2.3</span>
     <li><a href="#file-name">dfn for file</a><span>, in §2.2</span>
     <li><a href="#file-system-name">dfn for file system</a><span>, in §2.2</span>
    </ul>
   <li><a href="#parent">parent</a><span>, in §2.2</span>
   <li><a href="#path">path</a><span>, in §2.1</span>
   <li><a href="#path-segment">path segment</a><span>, in §2.1</span>
   <li><a href="#dom-filesystemdirectoryreader-readentries">readEntries(successCallback)</a><span>, in §7.3</span>
   <li>
    readEntries(successCallback, errorCallback)
    <ul>
     <li><a href="#dom-filesystemdirectoryentry-readentries">method for FileSystemDirectoryEntry</a><span>, in §7.3</span>
     <li><a href="#dom-filesystemdirectoryreader-readentries">method for FileSystemDirectoryReader</a><span>, in §7.3</span>
    </ul>
   <li><a href="#reader-error">reader error</a><span>, in §2.4</span>
   <li><a href="#reading-flag">reading flag</a><span>, in §2.4</span>
   <li><a href="#relative-path">relative path</a><span>, in §2.1</span>
   <li><a href="#resolve-a-relative-path">resolve a relative path</a><span>, in §3</span>
   <li>
    root
    <ul>
     <li><a href="#dom-filesystem-root">attribute for FileSystem</a><span>, in §7.5</span>
     <li><a href="#entry-root">dfn for entry</a><span>, in §2.3</span>
     <li><a href="#file-system-root">dfn for file system</a><span>, in §2.2</span>
    </ul>
   <li><a href="#root-directory">root directory</a><span>, in §2.2</span>
   <li><a href="#valid-path">valid path</a><span>, in §2.1</span>
   <li><a href="#dom-htmlinputelement-webkitdirectory">webkitdirectory</a><span>, in §5</span>
   <li><a href="#dom-htmlinputelement-webkitentries">webkitEntries</a><span>, in §5</span>
   <li><a href="#dom-datatransferitem-webkitgetasentry">webkitGetAsEntry()</a><span>, in §6</span>
   <li><a href="#dom-file-webkitrelativepath">webkitRelativePath</a><span>, in §4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-sec-asynciterator-interface">
   <a href="https://tc39.github.io/ecma262/#sec-asynciterator-interface">https://tc39.github.io/ecma262/#sec-asynciterator-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-asynciterator-interface">7.3. The FileSystemDirectoryReader Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-promise-objects">
   <a href="https://tc39.github.io/ecma262/#sec-promise-objects">https://tc39.github.io/ecma262/#sec-promise-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-promise-objects">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-sec-promise-objects①">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-sec-promise-objects②">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-sec-promise-objects③">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-file">
   <a href="https://w3c.github.io/FileAPI/#dfn-file">https://w3c.github.io/FileAPI/#dfn-file</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-file">4. The File Interface</a> <a href="#ref-for-dfn-file①">(2)</a> <a href="#ref-for-dfn-file②">(3)</a>
    <li><a href="#ref-for-dfn-file③">5. HTML: Forms</a>
    <li><a href="#ref-for-dfn-file④">6. HTML: Drag and drop</a>
    <li><a href="#ref-for-dfn-file⑤">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-dfn-file⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-filereader">
   <a href="https://w3c.github.io/FileAPI/#dfn-filereader">https://w3c.github.io/FileAPI/#dfn-filereader</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-filereader">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-name">
   <a href="https://w3c.github.io/FileAPI/#dfn-name">https://w3c.github.io/FileAPI/#dfn-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-name">5. HTML: Forms</a> <a href="#ref-for-dfn-name①">(2)</a> <a href="#ref-for-dfn-name②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-datatransferitem">
   <a href="https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem">https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-datatransferitem①">6. HTML: Drag and drop</a> <a href="#ref-for-datatransferitem②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlinputelement">
   <a href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement">https://html.spec.whatwg.org/multipage/input.html#htmlinputelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlinputelement①">5. HTML: Forms</a> <a href="#ref-for-htmlinputelement②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-input-accept">
   <a href="https://html.spec.whatwg.org/multipage/input.html#dom-input-accept">https://html.spec.whatwg.org/multipage/input.html#dom-input-accept</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-input-accept">5. HTML: Forms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-drag-data-item-kind">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-item-kind">https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-item-kind</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-drag-data-item-kind">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-drag-data-store">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store">https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-drag-data-store">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-drag-data-store-item-list">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store-item-list">https://html.spec.whatwg.org/multipage/interaction.html#drag-data-store-item-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-drag-data-store-item-list">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-file-upload-state-(type=file)">
   <a href="https://html.spec.whatwg.org/multipage/forms.html#file-upload-state-(type=file)">https://html.spec.whatwg.org/multipage/forms.html#file-upload-state-(type=file)</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-upload-state-(type=file)">5. HTML: Forms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-input-files">
   <a href="https://html.spec.whatwg.org/multipage/input.html#dom-input-files">https://html.spec.whatwg.org/multipage/input.html#dom-input-files</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-input-files">5. HTML: Forms</a> <a href="#ref-for-dom-input-files①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-datatransferitem-getasfile">
   <a href="https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-getasfile">https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitem-getasfile</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-datatransferitem-getasfile">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-input-element">
   <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">https://html.spec.whatwg.org/multipage/input.html#the-input-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-input-element">5. HTML: Forms</a> <a href="#ref-for-the-input-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-queue-a-task①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-queue-a-task②">(2)</a>
    <li><a href="#ref-for-queue-a-task③">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-queue-a-task④">(2)</a> <a href="#ref-for-queue-a-task⑤">(3)</a> <a href="#ref-for-queue-a-task⑥">(4)</a>
    <li><a href="#ref-for-queue-a-task⑦">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-dnd-ro">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-ro">https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-ro</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-dnd-ro">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-dnd-rw">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-rw">https://html.spec.whatwg.org/multipage/interaction.html#concept-dnd-rw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-dnd-rw">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-input-type-file-selected">
   <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-type-file-selected">https://html.spec.whatwg.org/multipage/forms.html#concept-input-type-file-selected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-input-type-file-selected">5. HTML: Forms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-input-type">
   <a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type">https://html.spec.whatwg.org/multipage/input.html#attr-input-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-input-type">5. HTML: Forms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-strictly-split">
   <a href="https://infra.spec.whatwg.org/#strictly-split">https://infra.spec.whatwg.org/#strictly-split</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-strictly-split">3. Algorithms</a> <a href="#ref-for-strictly-split①">(2)</a> <a href="#ref-for-strictly-split②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">7. Files and Directories</a>
    <li><a href="#ref-for-idl-DOMException①">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-idl-DOMException②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-idl-DOMException③">(2)</a> <a href="#ref-for-idl-DOMException④">(3)</a> <a href="#ref-for-idl-DOMException⑤">(4)</a> <a href="#ref-for-idl-DOMException⑥">(5)</a> <a href="#ref-for-idl-DOMException⑦">(6)</a> <a href="#ref-for-idl-DOMException⑧">(7)</a> <a href="#ref-for-idl-DOMException⑨">(8)</a>
    <li><a href="#ref-for-idl-DOMException①⓪">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-idl-DOMException①①">(2)</a> <a href="#ref-for-idl-DOMException①②">(3)</a>
    <li><a href="#ref-for-idl-DOMException①③">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-idl-DOMException①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-Exposed①">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-Exposed②">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-Exposed③">7.4. The FileSystemFileEntry Interface</a>
    <li><a href="#ref-for-Exposed④">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">7.3. The FileSystemDirectoryReader Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notfounderror">
   <a href="https://heycam.github.io/webidl/#notfounderror">https://heycam.github.io/webidl/#notfounderror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notfounderror">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-notfounderror①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-notfounderror②">(2)</a>
    <li><a href="#ref-for-notfounderror③">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-notfounderror④">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-securityerror">
   <a href="https://heycam.github.io/webidl/#securityerror">https://heycam.github.io/webidl/#securityerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-securityerror">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-securityerror①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-exceptiondef-typeerror">
   <a href="https://heycam.github.io/webidl/#exceptiondef-typeerror">https://heycam.github.io/webidl/#exceptiondef-typeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-exceptiondef-typeerror">7. Files and Directories</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typemismatcherror">
   <a href="https://heycam.github.io/webidl/#typemismatcherror">https://heycam.github.io/webidl/#typemismatcherror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typemismatcherror">7. Files and Directories</a>
    <li><a href="#ref-for-typemismatcherror①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-typemismatcherror②">(2)</a> <a href="#ref-for-typemismatcherror③">(3)</a> <a href="#ref-for-typemismatcherror④">(4)</a>
    <li><a href="#ref-for-typemismatcherror⑤">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-USVString">
   <a href="https://heycam.github.io/webidl/#idl-USVString">https://heycam.github.io/webidl/#idl-USVString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-USVString">2.1. Names and Paths</a>
    <li><a href="#ref-for-idl-USVString①">2.2. Files and Directories</a>
    <li><a href="#ref-for-idl-USVString②">4. The File Interface</a>
    <li><a href="#ref-for-idl-USVString③">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-idl-USVString④">(2)</a>
    <li><a href="#ref-for-idl-USVString⑤">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-idl-USVString⑥">(2)</a>
    <li><a href="#ref-for-idl-USVString⑦">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">5. HTML: Forms</a>
    <li><a href="#ref-for-idl-boolean①">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-idl-boolean②">(2)</a>
    <li><a href="#ref-for-idl-boolean③">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-idl-boolean④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-create-exception">
   <a href="https://heycam.github.io/webidl/#dfn-create-exception">https://heycam.github.io/webidl/#dfn-create-exception</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-create-exception">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-dfn-create-exception①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-dfn-create-exception②">(2)</a> <a href="#ref-for-dfn-create-exception③">(3)</a> <a href="#ref-for-dfn-create-exception④">(4)</a> <a href="#ref-for-dfn-create-exception⑤">(5)</a> <a href="#ref-for-dfn-create-exception⑥">(6)</a> <a href="#ref-for-dfn-create-exception⑦">(7)</a> <a href="#ref-for-dfn-create-exception⑧">(8)</a>
    <li><a href="#ref-for-dfn-create-exception⑨">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-dfn-create-exception①⓪">(2)</a>
    <li><a href="#ref-for-dfn-create-exception①①">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-dfn-create-exception①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invoke-a-callback-function">
   <a href="https://heycam.github.io/webidl/#invoke-a-callback-function">https://heycam.github.io/webidl/#invoke-a-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-a-callback-function">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-invoke-a-callback-function①">(2)</a>
    <li><a href="#ref-for-invoke-a-callback-function②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-invoke-a-callback-function③">(2)</a> <a href="#ref-for-invoke-a-callback-function④">(3)</a> <a href="#ref-for-invoke-a-callback-function⑤">(4)</a> <a href="#ref-for-invoke-a-callback-function⑥">(5)</a> <a href="#ref-for-invoke-a-callback-function⑦">(6)</a> <a href="#ref-for-invoke-a-callback-function⑧">(7)</a> <a href="#ref-for-invoke-a-callback-function⑨">(8)</a> <a href="#ref-for-invoke-a-callback-function①⓪">(9)</a> <a href="#ref-for-invoke-a-callback-function①①">(10)</a>
    <li><a href="#ref-for-invoke-a-callback-function①②">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-invoke-a-callback-function①③">(2)</a> <a href="#ref-for-invoke-a-callback-function①④">(3)</a> <a href="#ref-for-invoke-a-callback-function①⑤">(4)</a> <a href="#ref-for-invoke-a-callback-function①⑥">(5)</a> <a href="#ref-for-invoke-a-callback-function①⑦">(6)</a>
    <li><a href="#ref-for-invoke-a-callback-function①⑧">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-invoke-a-callback-function①⑨">(2)</a> <a href="#ref-for-invoke-a-callback-function②⓪">(3)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[ecma262]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-asynciterator-interface" style="color:initial">asynciterator</span>
     <li><span class="dfn-paneled" id="term-for-sec-promise-objects" style="color:initial">promise</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FileAPI]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dfn-file" style="color:initial">File</span>
     <li><span class="dfn-paneled" id="term-for-dfn-filereader" style="color:initial">FileReader</span>
     <li><span class="dfn-paneled" id="term-for-dfn-name" style="color:initial">name</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-datatransferitem" style="color:initial">DataTransferItem</span>
     <li><span class="dfn-paneled" id="term-for-htmlinputelement" style="color:initial">HTMLInputElement</span>
     <li><span class="dfn-paneled" id="term-for-dom-input-accept" style="color:initial">accept</span>
     <li><span class="dfn-paneled" id="term-for-the-drag-data-item-kind" style="color:initial">drag data item kind</span>
     <li><span class="dfn-paneled" id="term-for-drag-data-store" style="color:initial">drag data store</span>
     <li><span class="dfn-paneled" id="term-for-drag-data-store-item-list" style="color:initial">drag data store item list</span>
     <li><span class="dfn-paneled" id="term-for-file-upload-state-(type=file)" style="color:initial">file upload</span>
     <li><span class="dfn-paneled" id="term-for-dom-input-files" style="color:initial">files</span>
     <li><span class="dfn-paneled" id="term-for-dom-datatransferitem-getasfile" style="color:initial">getAsFile()</span>
     <li><span class="dfn-paneled" id="term-for-the-input-element" style="color:initial">input</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-concept-dnd-ro" style="color:initial">read-only mode</span>
     <li><span class="dfn-paneled" id="term-for-concept-dnd-rw" style="color:initial">read/write mode</span>
     <li><span class="dfn-paneled" id="term-for-concept-input-type-file-selected" style="color:initial">selected files</span>
     <li><span class="dfn-paneled" id="term-for-attr-input-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-strictly-split" style="color:initial">strictly split</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-notfounderror" style="color:initial">NotFoundError</span>
     <li><span class="dfn-paneled" id="term-for-securityerror" style="color:initial">SecurityError</span>
     <li><span class="dfn-paneled" id="term-for-exceptiondef-typeerror" style="color:initial">TypeError</span>
     <li><span class="dfn-paneled" id="term-for-typemismatcherror" style="color:initial">TypeMismatchError</span>
     <li><span class="dfn-paneled" id="term-for-idl-USVString" style="color:initial">USVString</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-create-exception" style="color:initial">created</span>
     <li><span class="dfn-paneled" id="term-for-invoke-a-callback-function" style="color:initial">invoke</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-fileapi">[FileAPI]
   <dd>Marijn Kruisselbrink; Arun Ranganathan. <a href="https://www.w3.org/TR/FileAPI/">File API</a>. 31 May 2019. WD. URL: <a href="https://www.w3.org/TR/FileAPI/">https://www.w3.org/TR/FileAPI/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-ecma-262">[ECMA-262]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-file-system-api">[FILE-SYSTEM-API]
   <dd>Eric Uhrhane. <a href="https://www.w3.org/TR/file-system-api/">File API: Directories and System</a>. 24 April 2014. NOTE. URL: <a href="https://www.w3.org/TR/file-system-api/">https://www.w3.org/TR/file-system-api/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file①①"><c- g>File</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString②①"><c- b>USVString</c-></a> <a data-readonly data-type="USVString" href="#dom-file-webkitrelativepath"><code><c- g>webkitRelativePath</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement" id="ref-for-htmlinputelement①①"><c- g>HTMLInputElement</c-></a> {
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤"><c- b>boolean</c-></a> <a data-type="boolean" href="#dom-htmlinputelement-webkitdirectory"><code><c- g>webkitdirectory</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①⑦"><c- n>FileSystemEntry</c-></a>> <a data-readonly data-type="FrozenArray<FileSystemEntry>" href="#dom-htmlinputelement-webkitentries"><code><c- g>webkitEntries</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/dnd.html#datatransferitem" id="ref-for-datatransferitem①①"><c- g>DataTransferItem</c-></a> {
    <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry②①"><c- n>FileSystemEntry</c-></a>? <a href="#dom-datatransferitem-webkitgetasentry"><code><c- g>webkitGetAsEntry</c-></code></a>();
};

<c- b>callback</c-> <a href="#callbackdef-errorcallback"><code><c- g>ErrorCallback</c-></code></a> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①⑤"><c- n>DOMException</c-></a> <a href="#dom-errorcallback-err"><code><c- g>err</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#filesystementry"><code><c- g>FileSystemEntry</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-filesystementry-isfile"><code><c- g>isFile</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-filesystementry-isdirectory"><code><c- g>isDirectory</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString③①"><c- b>USVString</c-></a> <a data-readonly data-type="USVString" href="#dom-filesystementry-name"><code><c- g>name</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString④①"><c- b>USVString</c-></a> <a data-readonly data-type="USVString" href="#dom-filesystementry-fullpath"><code><c- g>fullPath</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#filesystem" id="ref-for-filesystem⑤"><c- n>FileSystem</c-></a> <a data-readonly data-type="FileSystem" href="#dom-filesystementry-filesystem"><code><c- g>filesystem</c-></code></a>;

    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystementry-getparent" id="ref-for-dom-filesystementry-getparent②"><c- g>getParent</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback③"><c- n>FileSystemEntryCallback</c-></a> <a href="#dom-filesystementry-getparent-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code></a>,
                   <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback①①"><c- n>ErrorCallback</c-></a> <a href="#dom-filesystementry-getparent-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#filesystemdirectoryentry"><code><c- g>FileSystemDirectoryEntry</c-></code></a> : <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①②①"><c- n>FileSystemEntry</c-></a> {
    <a class="n" data-link-type="idl-name" href="#filesystemdirectoryreader" id="ref-for-filesystemdirectoryreader⑥"><c- n>FileSystemDirectoryReader</c-></a> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-createreader" id="ref-for-dom-filesystemdirectoryentry-createreader①"><c- g>createReader</c-></a>();
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-getfile" id="ref-for-dom-filesystemdirectoryentry-getfile②"><c- g>getFile</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑤①"><c- b>USVString</c-></a>? <a href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-path"><code><c- g>path</c-></code></a>,
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-filesystemflags" id="ref-for-dictdef-filesystemflags③"><c- n>FileSystemFlags</c-></a> <a href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-options"><code><c- g>options</c-></code></a> = {},
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback①①"><c- n>FileSystemEntryCallback</c-></a> <a href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code></a>,
                 <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback②①"><c- n>ErrorCallback</c-></a> <a href="#dom-filesystemdirectoryentry-getfile-path-options-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemdirectoryentry-getdirectory" id="ref-for-dom-filesystemdirectoryentry-getdirectory②"><c- g>getDirectory</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑥①"><c- b>USVString</c-></a>? <a href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-path"><code><c- g>path</c-></code></a>,
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-filesystemflags" id="ref-for-dictdef-filesystemflags①①"><c- n>FileSystemFlags</c-></a> <a href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-options"><code><c- g>options</c-></code></a> = {},
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-filesystementrycallback" id="ref-for-callbackdef-filesystementrycallback②①"><c- n>FileSystemEntryCallback</c-></a> <a href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code></a>,
                      <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback③①"><c- n>ErrorCallback</c-></a> <a href="#dom-filesystemdirectoryentry-getdirectory-path-options-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-filesystemflags"><code><c- g>FileSystemFlags</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-filesystemflags-create"><code><c- g>create</c-></code></a> = <c- b>false</c->;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-filesystemflags-exclusive"><code><c- g>exclusive</c-></code></a> = <c- b>false</c->;
};

<c- b>callback</c-> <a href="#callbackdef-filesystementrycallback"><code><c- g>FileSystemEntryCallback</c-></code></a> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①③①"><c- n>FileSystemEntry</c-></a> <a href="#dom-filesystementrycallback-entry"><code><c- g>entry</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#filesystemdirectoryreader"><code><c- g>FileSystemDirectoryReader</c-></code></a> {
    <c- b>void</c-> <a href="#dom-filesystemdirectoryreader-readentries"><code><c- g>readEntries</c-></code></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-filesystementriescallback" id="ref-for-callbackdef-filesystementriescallback①"><c- n>FileSystemEntriesCallback</c-></a> <a href="#dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code></a>,
                     <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback④①"><c- n>ErrorCallback</c-></a> <a href="#dom-filesystemdirectoryreader-readentries-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code></a>);
};
<c- b>callback</c-> <a href="#callbackdef-filesystementriescallback"><code><c- g>FileSystemEntriesCallback</c-></code></a> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①④①"><c- n>FileSystemEntry</c-></a>> <a href="#dom-filesystementriescallback-entries"><code><c- g>entries</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#filesystemfileentry"><code><c- g>FileSystemFileEntry</c-></code></a> : <a class="n" data-link-type="idl-name" href="#filesystementry" id="ref-for-filesystementry①⑤①"><c- n>FileSystemEntry</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-filesystemfileentry-file" id="ref-for-dom-filesystemfileentry-file②"><c- g>file</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-filecallback" id="ref-for-callbackdef-filecallback①"><c- n>FileCallback</c-></a> <a href="#dom-filesystemfileentry-file-successcallback-errorcallback-successcallback"><code><c- g>successCallback</c-></code></a>,
              <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-errorcallback" id="ref-for-callbackdef-errorcallback⑤①"><c- n>ErrorCallback</c-></a> <a href="#dom-filesystemfileentry-file-successcallback-errorcallback-errorcallback"><code><c- g>errorCallback</c-></code></a>);
};
<c- b>callback</c-> <a href="#callbackdef-filecallback"><code><c- g>FileCallback</c-></code></a> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="https://w3c.github.io/FileAPI/#dfn-file" id="ref-for-dfn-file⑤①"><c- n>File</c-></a> <a href="#dom-filecallback-file"><code><c- g>file</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#filesystem"><code><c- g>FileSystem</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑦①"><c- b>USVString</c-></a> <a data-readonly data-type="USVString" href="#dom-filesystem-name"><code><c- g>name</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#filesystemdirectoryentry" id="ref-for-filesystemdirectoryentry④①"><c- n>FileSystemDirectoryEntry</c-></a> <a data-readonly data-type="FileSystemDirectoryEntry" href="#dom-filesystem-root"><code><c- g>root</c-></code></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> EDITORIAL:
  Should <a data-link-type="dfn" href="#directory">directory</a> be defined as a special type of <a data-link-type="dfn" href="#file">file</a> so that minimal changes are necessary in <a data-link-type="biblio" href="#biblio-html">[HTML]</a>? <a href="#issue-44290766"> ↵ </a></div>
   <div class="issue"> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-fileapi">[FileAPI]</a> once it is complete. <a href="#issue-c8b14ee1"> ↵ </a></div>
   <div class="issue"> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-html">[HTML]</a> once it is complete.
  Sections such as the steps to <em>construct the form data set</em> need to be extended to include the <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath">webkitRelativePath</a></code> property. <a href="#issue-21f071e0"> ↵ </a></div>
   <div class="issue"> INTEROP:
  In Chrome, <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries">webkitEntries</a></code> is only populated as
  the result of a drag-and-drop operation, not when the element is
  clicked. Should we fix this so it is always populated? <a href="#issue-4cc238bb"> ↵ </a></div>
   <div class="issue"> INTEROP:
  In Chrome, if <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitdirectory">webkitdirectory</a></code> is specified on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#htmlinputelement">HTMLInputElement</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-htmlinputelement-webkitentries">webkitEntries</a></code> is not
  populated; the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/input.html#dom-input-files">files</a></code> collection and <code class="idl"><a data-link-type="idl" href="#dom-file-webkitrelativepath">webkitRelativePath</a></code> properties must be used instead to
  reconstruct the directory structure. Should we fix this so it is
  always populated? <a href="#issue-452f97f6"> ↵ </a></div>
   <div class="issue"> EDITORIAL:
  This section should be merged into <a data-link-type="biblio" href="#biblio-html">[HTML]</a> once it is complete. <a href="#issue-0615e37a"> ↵ </a></div>
   <div class="issue"> WEB COMPAT:
  The legacy <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#typemismatcherror">TypeMismatchError</a></code> has been replaced in most
  specifications by <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror">TypeError</a></code>, but the name differs. Is it
  compatible to switch here as well? <a href="#issue-b91b245d"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="name">
   <b><a href="#name">#name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-name">2.1. Names and Paths</a>
    <li><a href="#ref-for-name①">2.2. Files and Directories</a> <a href="#ref-for-name②">(2)</a> <a href="#ref-for-name③">(3)</a> <a href="#ref-for-name④">(4)</a>
    <li><a href="#ref-for-name⑤">2.3. Entries</a>
    <li><a href="#ref-for-name⑥">3. Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="path-segment">
   <b><a href="#path-segment">#path-segment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-path-segment">2.1. Names and Paths</a> <a href="#ref-for-path-segment①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="relative-path">
   <b><a href="#relative-path">#relative-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relative-path">2.1. Names and Paths</a>
    <li><a href="#ref-for-relative-path①">3. Algorithms</a>
    <li><a href="#ref-for-relative-path②">4. The File Interface</a>
    <li><a href="#ref-for-relative-path③">5. HTML: Forms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="absolute-path">
   <b><a href="#absolute-path">#absolute-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolute-path">2.1. Names and Paths</a>
    <li><a href="#ref-for-absolute-path①">2.3. Entries</a>
    <li><a href="#ref-for-absolute-path②">3. Algorithms</a> <a href="#ref-for-absolute-path③">(2)</a> <a href="#ref-for-absolute-path④">(3)</a> <a href="#ref-for-absolute-path⑤">(4)</a> <a href="#ref-for-absolute-path⑥">(5)</a> <a href="#ref-for-absolute-path⑦">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="path">
   <b><a href="#path">#path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-path">2.1. Names and Paths</a>
    <li><a href="#ref-for-path①">2.3. Entries</a> <a href="#ref-for-path②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valid-path">
   <b><a href="#valid-path">#valid-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valid-path">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-valid-path①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file">
   <b><a href="#file">#file</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file">2.2. Files and Directories</a> <a href="#ref-for-file①">(2)</a> <a href="#ref-for-file②">(3)</a>
    <li><a href="#ref-for-file③">3. Algorithms</a> <a href="#ref-for-file④">(2)</a>
    <li><a href="#ref-for-file⑤">6. HTML: Drag and drop</a>
    <li><a href="#ref-for-file⑥">7.2. The FileSystemDirectoryEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file-name">
   <b><a href="#file-name">#file-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-name">7.2. The FileSystemDirectoryEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directory">
   <b><a href="#directory">#directory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directory">2.2. Files and Directories</a> <a href="#ref-for-directory①">(2)</a> <a href="#ref-for-directory②">(3)</a> <a href="#ref-for-directory③">(4)</a> <a href="#ref-for-directory④">(5)</a> <a href="#ref-for-directory⑤">(6)</a> <a href="#ref-for-directory⑥">(7)</a>
    <li><a href="#ref-for-directory⑦">2.4. Directory Reader</a>
    <li><a href="#ref-for-directory⑧">3. Algorithms</a>
    <li><a href="#ref-for-directory⑨">6. HTML: Drag and drop</a> <a href="#ref-for-directory①⓪">(2)</a>
    <li><a href="#ref-for-directory①①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-directory①②">(2)</a>
    <li><a href="#ref-for-directory①③">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-directory①④">(2)</a> <a href="#ref-for-directory①⑤">(3)</a>
    <li><a href="#ref-for-directory①⑥">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directory-name">
   <b><a href="#directory-name">#directory-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directory-name">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-directory-name①">7.2. The FileSystemDirectoryEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="root-directory">
   <b><a href="#root-directory">#root-directory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-root-directory">2.2. Files and Directories</a> <a href="#ref-for-root-directory①">(2)</a> <a href="#ref-for-root-directory②">(3)</a> <a href="#ref-for-root-directory③">(4)</a>
    <li><a href="#ref-for-root-directory④">2.3. Entries</a> <a href="#ref-for-root-directory⑤">(2)</a>
    <li><a href="#ref-for-root-directory⑥">3. Algorithms</a>
    <li><a href="#ref-for-root-directory⑦">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parent">
   <b><a href="#parent">#parent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parent">2.2. Files and Directories</a>
    <li><a href="#ref-for-parent①">3. Algorithms</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file-system">
   <b><a href="#file-system">#file-system</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-system">2.2. Files and Directories</a> <a href="#ref-for-file-system①">(2)</a> <a href="#ref-for-file-system②">(3)</a> <a href="#ref-for-file-system③">(4)</a>
    <li><a href="#ref-for-file-system④">2.3. Entries</a>
    <li><a href="#ref-for-file-system⑤">7.5. The FileSystem Interface</a> <a href="#ref-for-file-system⑥">(2)</a> <a href="#ref-for-file-system⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file-system-name">
   <b><a href="#file-system-name">#file-system-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-system-name">2.2. Files and Directories</a> <a href="#ref-for-file-system-name①">(2)</a>
    <li><a href="#ref-for-file-system-name②">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file-system-root">
   <b><a href="#file-system-root">#file-system-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-system-root">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="entry-concept">
   <b><a href="#entry-concept">#entry-concept</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-entry-concept">2.3. Entries</a> <a href="#ref-for-entry-concept①">(2)</a> <a href="#ref-for-entry-concept②">(3)</a> <a href="#ref-for-entry-concept③">(4)</a> <a href="#ref-for-entry-concept④">(5)</a> <a href="#ref-for-entry-concept⑤">(6)</a>
    <li><a href="#ref-for-entry-concept⑥">6. HTML: Drag and drop</a> <a href="#ref-for-entry-concept⑦">(2)</a> <a href="#ref-for-entry-concept⑧">(3)</a>
    <li><a href="#ref-for-entry-concept⑨">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-entry-concept①⓪">(2)</a> <a href="#ref-for-entry-concept①①">(3)</a> <a href="#ref-for-entry-concept①②">(4)</a> <a href="#ref-for-entry-concept①③">(5)</a> <a href="#ref-for-entry-concept①④">(6)</a> <a href="#ref-for-entry-concept①⑤">(7)</a> <a href="#ref-for-entry-concept①⑥">(8)</a>
    <li><a href="#ref-for-entry-concept①⑦">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-entry-concept①⑧">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-entry-concept①⑨">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="file-entry">
   <b><a href="#file-entry">#file-entry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-file-entry">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-file-entry①">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-file-entry②">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-file-entry③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directory-entry">
   <b><a href="#directory-entry">#directory-entry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directory-entry">2.4. Directory Reader</a>
    <li><a href="#ref-for-directory-entry①">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-directory-entry②">(2)</a>
    <li><a href="#ref-for-directory-entry③">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-directory-entry④">(2)</a> <a href="#ref-for-directory-entry⑤">(3)</a> <a href="#ref-for-directory-entry⑥">(4)</a> <a href="#ref-for-directory-entry⑦">(5)</a> <a href="#ref-for-directory-entry⑧">(6)</a> <a href="#ref-for-directory-entry⑨">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="entry-name">
   <b><a href="#entry-name">#entry-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-entry-name">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-entry-name①">(2)</a>
    <li><a href="#ref-for-entry-name②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-entry-name③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="full-path">
   <b><a href="#full-path">#full-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-full-path">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-full-path①">(2)</a> <a href="#ref-for-full-path②">(3)</a>
    <li><a href="#ref-for-full-path③">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-full-path④">(2)</a> <a href="#ref-for-full-path⑤">(3)</a> <a href="#ref-for-full-path⑥">(4)</a>
    <li><a href="#ref-for-full-path⑦">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-full-path⑧">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="entry-root">
   <b><a href="#entry-root">#entry-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-entry-root">2.3. Entries</a>
    <li><a href="#ref-for-entry-root①">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-entry-root②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-entry-root③">(2)</a>
    <li><a href="#ref-for-entry-root④">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-entry-root⑤">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="entry-file-system">
   <b><a href="#entry-file-system">#entry-file-system</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-entry-file-system">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directory-reader">
   <b><a href="#directory-reader">#directory-reader</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directory-reader">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-directory-reader①">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-directory-reader②">(2)</a> <a href="#ref-for-directory-reader③">(3)</a> <a href="#ref-for-directory-reader④">(4)</a> <a href="#ref-for-directory-reader⑤">(5)</a> <a href="#ref-for-directory-reader⑥">(6)</a> <a href="#ref-for-directory-reader⑦">(7)</a> <a href="#ref-for-directory-reader⑧">(8)</a> <a href="#ref-for-directory-reader⑨">(9)</a> <a href="#ref-for-directory-reader①⓪">(10)</a> <a href="#ref-for-directory-reader①①">(11)</a> <a href="#ref-for-directory-reader①②">(12)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reading-flag">
   <b><a href="#reading-flag">#reading-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reading-flag">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-reading-flag①">(2)</a> <a href="#ref-for-reading-flag②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="done-flag">
   <b><a href="#done-flag">#done-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-done-flag">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-done-flag①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reader-error">
   <b><a href="#reader-error">#reader-error</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reader-error">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-reader-error①">(2)</a> <a href="#ref-for-reader-error②">(3)</a> <a href="#ref-for-reader-error③">(4)</a> <a href="#ref-for-reader-error④">(5)</a> <a href="#ref-for-reader-error⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resolve-a-relative-path">
   <b><a href="#resolve-a-relative-path">#resolve-a-relative-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolve-a-relative-path">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-resolve-a-relative-path①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-resolve-a-relative-path②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="evaluate-a-path">
   <b><a href="#evaluate-a-path">#evaluate-a-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-evaluate-a-path">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-evaluate-a-path①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-evaluate-a-path②">(2)</a>
    <li><a href="#ref-for-evaluate-a-path③">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-evaluate-a-path④">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-file-webkitrelativepath">
   <b><a href="#dom-file-webkitrelativepath">#dom-file-webkitrelativepath</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-file-webkitrelativepath">4. The File Interface</a>
    <li><a href="#ref-for-dom-file-webkitrelativepath①">5. HTML: Forms</a> <a href="#ref-for-dom-file-webkitrelativepath②">(2)</a> <a href="#ref-for-dom-file-webkitrelativepath③">(3)</a> <a href="#ref-for-dom-file-webkitrelativepath④">(4)</a> <a href="#ref-for-dom-file-webkitrelativepath⑤">(5)</a> <a href="#ref-for-dom-file-webkitrelativepath⑥">(6)</a> <a href="#ref-for-dom-file-webkitrelativepath⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlinputelement-webkitdirectory">
   <b><a href="#dom-htmlinputelement-webkitdirectory">#dom-htmlinputelement-webkitdirectory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlinputelement-webkitdirectory">5. HTML: Forms</a> <a href="#ref-for-dom-htmlinputelement-webkitdirectory①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlinputelement-webkitentries">
   <b><a href="#dom-htmlinputelement-webkitentries">#dom-htmlinputelement-webkitentries</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlinputelement-webkitentries">5. HTML: Forms</a> <a href="#ref-for-dom-htmlinputelement-webkitentries①">(2)</a> <a href="#ref-for-dom-htmlinputelement-webkitentries②">(3)</a> <a href="#ref-for-dom-htmlinputelement-webkitentries③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-datatransferitem-webkitgetasentry">
   <b><a href="#dom-datatransferitem-webkitgetasentry">#dom-datatransferitem-webkitgetasentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-datatransferitem-webkitgetasentry">6. HTML: Drag and drop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-errorcallback">
   <b><a href="#callbackdef-errorcallback">#callbackdef-errorcallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-errorcallback">7. Files and Directories</a>
    <li><a href="#ref-for-callbackdef-errorcallback①">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-callbackdef-errorcallback②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-callbackdef-errorcallback③">(2)</a>
    <li><a href="#ref-for-callbackdef-errorcallback④">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-callbackdef-errorcallback⑤">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="filesystementry">
   <b><a href="#filesystementry">#filesystementry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-filesystementry">5. HTML: Forms</a> <a href="#ref-for-filesystementry①">(2)</a>
    <li><a href="#ref-for-filesystementry②">6. HTML: Drag and drop</a> <a href="#ref-for-filesystementry③">(2)</a>
    <li><a href="#ref-for-filesystementry④">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-filesystementry⑤">(2)</a> <a href="#ref-for-filesystementry⑥">(3)</a> <a href="#ref-for-filesystementry⑦">(4)</a> <a href="#ref-for-filesystementry⑧">(5)</a> <a href="#ref-for-filesystementry⑨">(6)</a> <a href="#ref-for-filesystementry①⓪">(7)</a> <a href="#ref-for-filesystementry①①">(8)</a>
    <li><a href="#ref-for-filesystementry①②">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-filesystementry①③">(2)</a>
    <li><a href="#ref-for-filesystementry①④">7.3. The FileSystemDirectoryReader Interface</a>
    <li><a href="#ref-for-filesystementry①⑤">7.4. The FileSystemFileEntry Interface</a>
    <li><a href="#ref-for-filesystementry①⑥">8. Acknowledgements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-isfile">
   <b><a href="#dom-filesystementry-isfile">#dom-filesystementry-isfile</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-isfile">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-isdirectory">
   <b><a href="#dom-filesystementry-isdirectory">#dom-filesystementry-isdirectory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-isdirectory">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-name">
   <b><a href="#dom-filesystementry-name">#dom-filesystementry-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-name">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-fullpath">
   <b><a href="#dom-filesystementry-fullpath">#dom-filesystementry-fullpath</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-fullpath">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-filesystem">
   <b><a href="#dom-filesystementry-filesystem">#dom-filesystementry-filesystem</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-filesystem">7.1. The FileSystemEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystementry-getparent">
   <b><a href="#dom-filesystementry-getparent">#dom-filesystementry-getparent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystementry-getparent">7.1. The FileSystemEntry Interface</a> <a href="#ref-for-dom-filesystementry-getparent①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="filesystemdirectoryentry">
   <b><a href="#filesystemdirectoryentry">#filesystemdirectoryentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-filesystemdirectoryentry">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-filesystemdirectoryentry①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-filesystemdirectoryentry②">(2)</a> <a href="#ref-for-filesystemdirectoryentry③">(3)</a>
    <li><a href="#ref-for-filesystemdirectoryentry④">7.5. The FileSystem Interface</a> <a href="#ref-for-filesystemdirectoryentry⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-filesystemflags">
   <b><a href="#dictdef-filesystemflags">#dictdef-filesystemflags</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-filesystemflags">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-dictdef-filesystemflags①">(2)</a> <a href="#ref-for-dictdef-filesystemflags②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemflags-create">
   <b><a href="#dom-filesystemflags-create">#dom-filesystemflags-create</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemflags-create">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-dom-filesystemflags-create①">(2)</a> <a href="#ref-for-dom-filesystemflags-create②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemflags-exclusive">
   <b><a href="#dom-filesystemflags-exclusive">#dom-filesystemflags-exclusive</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemflags-exclusive">7.2. The FileSystemDirectoryEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-filesystementrycallback">
   <b><a href="#callbackdef-filesystementrycallback">#callbackdef-filesystementrycallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-filesystementrycallback">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-callbackdef-filesystementrycallback①">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-callbackdef-filesystementrycallback②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemdirectoryentry-createreader">
   <b><a href="#dom-filesystemdirectoryentry-createreader">#dom-filesystemdirectoryentry-createreader</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemdirectoryentry-createreader">7.2. The FileSystemDirectoryEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemdirectoryentry-getfile">
   <b><a href="#dom-filesystemdirectoryentry-getfile">#dom-filesystemdirectoryentry-getfile</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemdirectoryentry-getfile">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-dom-filesystemdirectoryentry-getfile①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemdirectoryentry-getdirectory">
   <b><a href="#dom-filesystemdirectoryentry-getdirectory">#dom-filesystemdirectoryentry-getdirectory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemdirectoryentry-getdirectory">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-dom-filesystemdirectoryentry-getdirectory①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="filesystemdirectoryreader">
   <b><a href="#filesystemdirectoryreader">#filesystemdirectoryreader</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-filesystemdirectoryreader">7.2. The FileSystemDirectoryEntry Interface</a> <a href="#ref-for-filesystemdirectoryreader①">(2)</a>
    <li><a href="#ref-for-filesystemdirectoryreader②">7.3. The FileSystemDirectoryReader Interface</a> <a href="#ref-for-filesystemdirectoryreader③">(2)</a> <a href="#ref-for-filesystemdirectoryreader④">(3)</a> <a href="#ref-for-filesystemdirectoryreader⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-filesystementriescallback">
   <b><a href="#callbackdef-filesystementriescallback">#callbackdef-filesystementriescallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-filesystementriescallback">7.3. The FileSystemDirectoryReader Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="filesystemfileentry">
   <b><a href="#filesystemfileentry">#filesystemfileentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-filesystemfileentry">7.2. The FileSystemDirectoryEntry Interface</a>
    <li><a href="#ref-for-filesystemfileentry①">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-filesystemfileentry②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-filecallback">
   <b><a href="#callbackdef-filecallback">#callbackdef-filecallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-filecallback">7.4. The FileSystemFileEntry Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystemfileentry-file">
   <b><a href="#dom-filesystemfileentry-file">#dom-filesystemfileentry-file</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystemfileentry-file">7.4. The FileSystemFileEntry Interface</a> <a href="#ref-for-dom-filesystemfileentry-file①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="filesystem">
   <b><a href="#filesystem">#filesystem</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-filesystem">7.1. The FileSystemEntry Interface</a>
    <li><a href="#ref-for-filesystem①">7.5. The FileSystem Interface</a> <a href="#ref-for-filesystem②">(2)</a> <a href="#ref-for-filesystem③">(3)</a> <a href="#ref-for-filesystem④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystem-name">
   <b><a href="#dom-filesystem-name">#dom-filesystem-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystem-name">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-filesystem-root">
   <b><a href="#dom-filesystem-root">#dom-filesystem-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-filesystem-root">7.5. The FileSystem Interface</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>